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

:root {
  /* Color Palette - Liquid Glass Apple Design */
  --bg-primary: linear-gradient(180deg, #F5F5F7 0%, #FAFAFC 100%);
  --bg-secondary: rgba(255, 255, 255, 0.7);
  --bg-card: rgba(255, 255, 255, 0.6);
  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-hover: rgba(0, 0, 0, 0.15);
  --text-primary: #1D1D1F;
  --text-secondary: #48484A;
  --accent-gray: #8E8E93;
  --accent-gray-light: #AEAEB2;
  --success-green: #34C759;
  --danger-red: #FF3B30;
  
  /* Typography */
  --font-ui: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Transitions */
  --transition-speed: 0.15s;
  
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  /* See .chart-container: 100vh is iOS Safari's tallest viewport, so it runs the layout
     underneath the browser's own bottom toolbar. dvh tracks what is actually visible. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #131722;
  color: #D1D4DC;
  font-family: var(--font-ui);
}

::selection {
  background: rgba(142, 142, 147, 0.2);
  color: #1D1D1F;
}

#root {
  width: 100%;
  height: 100%;
}

button {
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  border: none;
  outline: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input, select {
  font-family: var(--font-ui);
  transition: all var(--transition-speed) ease;
}

input:focus, select:focus {
  outline: none;
  border-color: rgba(142, 142, 147, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(142, 142, 147, 0.1) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
/* Mobile-First Responsive Styles */

/* Withholds pinch-zoom and double-tap-zoom from the browser: listing only the pan values
   is what blocks them. This is the lock that actually holds on iOS Safari, which has
   ignored user-scalable=no since iOS 10. (The old comment here claimed it still allowed
   pinch-zoom - it never did, and .chart-container was separately adding pinch-zoom back
   with !important, which is how the whole app stayed zoomable.) */
* {
  touch-action: pan-x pan-y;
}

/* Mobile viewport adjustments */
@media (max-width: 768px) {
  body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* dvh, and deliberately not position: fixed with inset: 0. That looks like the more
     robust way to fill the screen, and on iOS it is the opposite: Safari resolves fixed
     positioning against the LARGE viewport - the height the page would have with the
     toolbars hidden - so inset: 0 overshoots whatever is actually on screen and posts the
     bottom of the app underneath the toolbar. dvh is the unit that tracks the visible
     height as that chrome comes and goes, which is the whole reason it exists.
     vh stays ahead of it for browsers without dvh. */
  .App {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* --app-height is visualViewport.height, written from main.jsx - the measured visible
       area, which is the only figure that has been right in a tab and in a standalone
       window at the same time. The units above remain the fallback if the script has not
       run yet. */
    height: var(--app-height, 100dvh);
    /* Side insets live here rather than on body: they keep the app's background running to
       the edges while holding its contents out of the notch, which matters in landscape. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Optimize chart container for mobile */
  .chart-container {
    /* pinch-zoom removed: it handed the pinch to the browser, which zoomed the whole page.
       Withholding it leaves the gesture to the chart's own touch handlers, so pinching
       scales the candles - what the gesture should have done here all along - instead of
       magnifying the interface. */
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Make toolbars scrollable on small screens */
  .toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .toolbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  /* Optimize buttons for touch */
  button, .btn, .tool-btn {
    min-height: 44px; /* iOS recommended touch target size */
    min-width: 44px;
    padding: 8px 12px;
  }

  /* Make modal dialogs mobile-friendly */
  .modal-content, .alert-modal, .backtest-modal {
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Symbol selector - make scrollable */
  .symbol-selector {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Settings panel - adjust for mobile */
  .settings-panel {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Input fields - easier to tap */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    min-height: 44px;
  }

  /* Optimize dropdown menus */
  select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
  }

  /* Hide desktop-only elements on mobile */
  .desktop-only {
    display: none !important;
  }

  /* Optimize color picker for mobile */
  .custom-color-adder {
    max-width: 90vw;
  }

  /* Make chart legend responsive */
  .legend {
    font-size: 12px;
    flex-wrap: wrap;
  }

  /* Optimize navbar for mobile: scroll horizontally instead of wrapping/overlapping */
  .navbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0 8px;
  }

  .navbar::-webkit-scrollbar {
    display: none;
  }

  /* Stack elements vertically on small screens */
  .flex-row-mobile-column {
    flex-direction: column !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .chart-container {
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  button, .btn {
    min-height: 40px;
    min-width: 40px;
  }
}

/* Landscape mobile */
@media (max-width: 896px) and (orientation: landscape) {
  .modal-content {
    max-height: 85vh;
    overflow-y: auto;
  }

  .toolbar {
    padding: 4px;
  }

  button {
    min-height: 36px;
    min-width: 36px;
    padding: 6px 10px;
  }
}

/* Notched devices are handled where the elements that meet the system UI are defined, not
   here on body: the navbar pads by the top inset, the bottom strip by the bottom inset, and
   .App by the side insets. Padding body instead held the whole app off the screen edges,
   which installed to the home screen read as bands of page background top and bottom.
   .App is also position: fixed on a phone, so it would not inherit body's padding anyway. */

/* PWA display mode detection */
@media (display-mode: standalone) {
  /* When installed as PWA */
  .install-prompt {
    display: none !important;
  }
}

/* Touch feedback */
button:active,
.btn:active,
.tool-btn:active {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Prevent text selection on UI elements during touch */
.toolbar,
.navbar,
.control-panel,
.sidebar {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow text selection in inputs and content areas */
input,
textarea,
.content-area {
  -webkit-user-select: text;
  user-select: text;
}
.App {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
}

/* Hide lightweight-charts watermark */
.tv-lightweight-charts {
  position: relative;
}

.tv-lightweight-charts > div:last-child {
  display: none !important;
}

div[style*="position: absolute"][style*="bottom: 0"][style*="right: 0"] {
  display: none !important;
}

/* Price Alert Notification Animation */
@keyframes slideDown {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
.alert-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  z-index: 1501;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* The shared .modal-content rule carries no horizontal padding, because the symbol
   modal's own rows inset themselves. This modal's sections do not, so their content sat
   flush against the edges while the header above was inset 24px. Scoped to .alert-modal
   rather than fixing the shared rule, which every other modal already lays out around. */
.alert-modal .modal-content {
  padding: 8px 24px 24px;
}

.alert-error {
  padding: 12px 16px;
  margin-bottom: 20px;
  background-color: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 10px;
  color: #FF3B30;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
}

.alert-section {
  margin-bottom: 28px;
}

.alert-section:last-child {
  margin-bottom: 0;
}

.alert-section h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  color: #6E6E73;
  margin: 0 0 16px 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.alert-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.alert-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.alert-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: #6E6E73;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.alert-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #1D1D1F;
}

.alert-toggle-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.alert-toggle-btn.enable {
  background: linear-gradient(135deg, #34C759, #30B554);
  color: white;
  box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
}

.alert-toggle-btn.enable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(52, 199, 89, 0.4);
}

.alert-toggle-btn.disable {
  background: linear-gradient(135deg, #FF3B30, #E82E24);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);
}

.alert-toggle-btn.disable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 59, 48, 0.4);
}

.alert-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  transition: all 0.15s ease;
}

.alert-item:hover {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.alert-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.alert-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alert-item-symbol {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: #1D1D1F;
}

.alert-item-timeframe {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 2px 8px;
  background: rgba(142, 142, 147, 0.1);
  border: 1px solid rgba(142, 142, 147, 0.2);
  border-radius: 6px;
  color: #8E8E93;
}

.alert-item-details {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.alert-delete-btn {
  width: 32px;
  height: 32px;
  background-color: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
  border-radius: 8px;
  color: #FF3B30;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.alert-delete-btn:hover {
  background-color: #FF3B30;
  border-color: #FF3B30;
  color: white;
  box-shadow: 0 4px 20px rgba(255, 59, 48, 0.4);
  transform: translateY(-2px);
}

/* Dark Mode Styles */
.alert-modal.dark-mode {
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid #2A2A2A;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dark-mode .modal-header {
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .alert-error {
  background-color: rgba(255, 59, 48, 0.15);
  border: 1px solid rgba(255, 59, 48, 0.4);
  color: #FF6B6B;
}

.dark-mode .alert-section h4 {
  color: #8E8E93;
}

.dark-mode .alert-info-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2A2A2A;
}

.dark-mode .alert-label {
  color: #8E8E93;
}

.dark-mode .alert-value {
  color: #FFFFFF;
}

.dark-mode .alert-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2A2A2A;
}

.dark-mode .alert-item:hover {
  border-color: #3A3A3A;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .alert-item-symbol {
  color: #FFFFFF;
}

.dark-mode .alert-item-timeframe {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2A2A2A;
  color: #E5E5EA;
}

.dark-mode .alert-item-details {
  color: #8E8E93;
}

.dark-mode .alert-delete-btn {
  background-color: rgba(255, 59, 48, 0.15);
  border: 1px solid rgba(255, 59, 48, 0.3);
  color: #FF6B6B;
}

.dark-mode .alert-delete-btn:hover {
  background-color: #FF3B30;
  border-color: #FF3B30;
  color: white;
}
/* Alert Trigger Status */
.alert-recent-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  background: linear-gradient(135deg, #34C759, #30B554);
  color: white;
  border-radius: 6px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.alert-item-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.alert-trigger-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: #8E8E93;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.alert-trigger-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.alert-trigger-time.triggered {
  color: #34C759;
}

.alert-trigger-time.never {
  color: #8E8E93;
  font-style: italic;
}

/* Webhooks - an additional destination alerts are copied to */
.webhook-hint {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: #6E6E73;
  margin-bottom: 14px;
}

.webhook-list {
  margin-bottom: 12px;
}

.webhook-item {
  align-items: flex-start;
}

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

.webhook-action-btn {
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: #1D1D1F;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.webhook-action-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.webhook-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.webhook-action-btn.primary {
  background: linear-gradient(135deg, #34C759, #30B554);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 15px rgba(52, 199, 89, 0.25);
}

.webhook-badge {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.webhook-badge.off {
  background: rgba(142, 142, 147, 0.15);
  border: 1px solid rgba(142, 142, 147, 0.3);
  color: #8E8E93;
}

.webhook-badge.signed {
  background: rgba(52, 152, 219, 0.12);
  border: 1px solid rgba(52, 152, 219, 0.3);
  color: #2980B9;
}

.webhook-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

.webhook-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.webhook-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: #1D1D1F;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.webhook-input:focus {
  border-color: #34C759;
}

.webhook-input::placeholder {
  color: #A1A1A6;
}

.webhook-select {
  cursor: pointer;
}

.webhook-form-actions {
  display: flex;
  gap: 8px;
}

.webhook-add-btn {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: #6E6E73;
  cursor: pointer;
  transition: all 0.15s ease;
}

.webhook-add-btn:hover {
  border-color: #34C759;
  color: #34C759;
  background: rgba(52, 199, 89, 0.05);
}

/* Webhooks - dark mode */
.dark-mode .webhook-hint {
  color: #8E8E93;
}

.dark-mode .webhook-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #2A2A2A;
  color: #E5E5EA;
}

.dark-mode .webhook-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: #3A3A3A;
}

.dark-mode .webhook-action-btn.primary {
  background: linear-gradient(135deg, #34C759, #30B554);
  border-color: transparent;
  color: white;
}

.dark-mode .webhook-badge.signed {
  background: rgba(52, 152, 219, 0.18);
  border: 1px solid rgba(52, 152, 219, 0.4);
  color: #5DADE2;
}

.dark-mode .webhook-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2A2A2A;
}

.dark-mode .webhook-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .webhook-input::placeholder {
  color: #636366;
}

.dark-mode .webhook-input:focus {
  border-color: #30D158;
}

.dark-mode .webhook-add-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed #3A3A3A;
  color: #8E8E93;
}

.dark-mode .webhook-add-btn:hover {
  border-color: #30D158;
  color: #30D158;
  background: rgba(48, 209, 88, 0.08);
}

/* Dark Mode for Trigger Status */
.dark-mode .alert-trigger-label {
  color: #8E8E93;
}

.dark-mode .alert-trigger-time.triggered {
  color: #30D158;
}

.dark-mode .alert-trigger-time.never {
  color: #636366;
}/* Backtest Results Modal Overlay */
.backtest-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* Modal Content */
.backtest-modal-content {
  background: #1c1c1e;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

.backtest-modal-overlay.light .backtest-modal-content {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.backtest-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px 20px 32px;
  border-bottom: none;
}

.backtest-modal-overlay.light .backtest-modal-header {
  border-bottom: none;
}

.backtest-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.backtest-modal-overlay.light .backtest-modal-title {
  color: #000000;
}

.backtest-modal-close {
  background: transparent;
  border: none;
  color: #666;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backtest-modal-overlay.light .backtest-modal-close {
  color: #888;
}

.backtest-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #999;
}

.backtest-modal-overlay.light .backtest-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #444;
}

/* Body */
.backtest-modal-body {
  padding: 0 32px 20px 32px;
}

.backtest-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.backtest-stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s ease;
}

.backtest-modal-overlay.light .backtest-stat-card {
  background: #f8f9fa;
  border: 1px solid #e5e5e5;
}

.backtest-stat-card.highlight {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.backtest-modal-overlay.light .backtest-stat-card.highlight {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.backtest-stat-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.backtest-modal-overlay.light .backtest-stat-card:hover {
  border-color: #d0d0d0;
  transform: translateY(-2px);
}

.backtest-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #d0d0d0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}

.backtest-modal-overlay.light .backtest-stat-label {
  color: #666;
}

.backtest-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #d0d0d0;
  display: block;
}

.backtest-modal-overlay.light .backtest-stat-value {
  color: #000000;
}

.backtest-stat-value.best {
  color: #10B981;
}

.backtest-modal-overlay.light .backtest-stat-value.best {
  color: #059669;
}

.backtest-time-info {
  text-align: center;
  padding: 12px;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #c0c0c0;
}

.backtest-modal-overlay.light .backtest-time-info {
  color: #666;
}

/* Footer */
.backtest-modal-footer {
  display: flex;
  gap: 12px;
  padding: 0 32px 28px 32px;
  border-top: none;
  background: transparent;
}

.backtest-modal-overlay.light .backtest-modal-footer {
  border-top: none;
  background: transparent;
}

.backtest-modal-btn {
  flex: 1;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  letter-spacing: 0.3px;
}

/* Close Button - Red */
.backtest-modal-btn.cancel {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.backtest-modal-overlay.light .backtest-modal-btn.cancel {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.backtest-modal-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.backtest-modal-overlay.light .backtest-modal-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.backtest-modal-btn.cancel:active {
  transform: translateY(0);
}

/* Apply Button - Green */
.backtest-modal-btn.apply {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.backtest-modal-overlay.light .backtest-modal-btn.apply {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.backtest-modal-btn.apply:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.backtest-modal-overlay.light .backtest-modal-btn.apply:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.backtest-modal-btn.apply:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 640px) {
  .backtest-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .backtest-modal-content {
    width: 95%;
    margin: 20px;
  }
  
  .backtest-modal-header,
  .backtest-modal-body,
  .backtest-modal-footer {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* Backtest Results Modal Overlay */
.backtest-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* Modal Content */
.backtest-modal-content {
  background: #1c1c1e;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

.backtest-modal-overlay.light .backtest-modal-content {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.backtest-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  border-bottom: none;
}

.backtest-modal-overlay.light .backtest-modal-header {
  border-bottom: none;
}

.backtest-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.backtest-modal-overlay.light .backtest-modal-title {
  color: #000000;
}

.backtest-modal-close {
  background: transparent;
  border: 1px solid #555;
  color: #888;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backtest-modal-overlay.light .backtest-modal-close {
  color: #888;
}

.backtest-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #999;
}

.backtest-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.backtest-stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s ease;
}

.backtest-modal-overlay.light .backtest-stat-card {
  background: #f8f9fa;
  border: 1px solid #e5e5e5;
}

.backtest-stat-card.highlight {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.backtest-modal-overlay.light .backtest-stat-card.highlight {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.backtest-stat-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.backtest-modal-overlay.light .backtest-stat-card:hover {
  border-color: #d0d0d0;
}

.backtest-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}

.backtest-modal-overlay.light .backtest-stat-label {
  color: #666;
}

.backtest-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #d0d0d0;
  display: block;
}

.backtest-modal-overlay.light .backtest-stat-value {
  color: #000000;
}

.backtest-stat-value.best {
  color: #10B981;
}

.backtest-modal-overlay.light .backtest-stat-value.best {
  color: #059669;
}

.backtest-time-info {
  text-align: center;
  padding: 12px;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
}

.backtest-modal-overlay.light .backtest-time-info {
  color: #888;
}

/* Footer */
.backtest-modal-footer {
  display: flex;
  gap: 10px;
  padding: 24px 32px;
  border-top: none;
  background: transparent;
}

.backtest-modal-overlay.light .backtest-modal-footer {
  border-top: none;
  background: transparent;
}

.backtest-modal-btn {
  flex: 1;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  letter-spacing: 0.3px;
}

.backtest-modal-btn.cancel {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.backtest-modal-overlay.light .backtest-modal-btn.cancel {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.backtest-modal-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.backtest-modal-overlay.light .backtest-modal-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.backtest-modal-btn.cancel:active {
  transform: translateY(0);
}

.backtest-modal-btn.apply {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.backtest-modal-overlay.light .backtest-modal-btn.apply {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.backtest-modal-btn.apply:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.backtest-modal-overlay.light .backtest-modal-btn.apply:hover {
  background: rgba(16, 185, 129, 0.2);
}

.backtest-modal-btn.apply:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 640px) {
  .backtest-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .backtest-modal-content {
    width: 95%;
    margin: 20px;
  }
}
/* ========================================
   CHART CONTAINER
   ======================================== */
.chart-container {
  position: relative;
  width: 100vw;
  /* 100vh on iOS Safari is the viewport with the browser chrome retracted - its tallest
     state, not its current one. With the toolbar showing, which is its default, the last
     ~90px of this container sit behind that toolbar, and the bottom strip with it: the
     Chartify AI, Trading Panel, Journal and Alerts buttons were simply not on screen.
     dvh follows the visible height as the chrome comes and goes. vh stays first as the
     fallback for browsers without dvh. */
  /* Fills the screen edge to edge, including behind the status bar and home indicator -
     viewport-fit=cover asks for exactly that. Insetting the container instead left the
     body's own background showing as dark bands top and bottom. The navbar and bottom
     strip pad themselves by the insets, so their surfaces reach the edges while their
     contents stay clear of the system UI. */
  height: 100vh;
  height: 100dvh;
  background: #0A0A0A;
  background-image: var(--bg-primary);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* ========================================
   TOP NAVBAR
   ======================================== */
.navbar {
  height: 48px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 12px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 0;
  position: relative;
  z-index: 100;
  /* Scroll horizontally instead of overlapping when the window is too narrow */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.navbar::-webkit-scrollbar {
  display: none;
}

.navbar-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar-center {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  /* Auto side-margins keep it centered between left/right on wide screens,
     and collapse (letting the navbar scroll) when space runs out */
  margin-left: auto;
  margin-right: auto;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
  color: #F5F5F5;
  letter-spacing: -0.2px;
}

.logo-dot {
  color: #667EEA;
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
}

.logo-text {
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #1D1D1F;
}

.profile-picture {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: white;
  letter-spacing: 0.5px;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: -8px;
}

.profile-picture::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.profile-picture:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.4);
}

.profile-picture:hover::before {
  opacity: 1;
}

.profile-picture:active {
  transform: scale(1.02);
  box-shadow: none;
}

/* Profile Modal */
.profile-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 90vw;
  max-height: 85vh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.profile-avatar-section {
  text-align: center;
  padding: 36px 32px 32px;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}

.profile-avatar-large {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 38px;
  color: white;
  margin: 0 auto 20px;
  box-shadow: none;
  position: relative;
  z-index: 1;
  border: none;
}

.profile-name {
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 700;
  color: #1D1D1F;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.profile-email {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #718096;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-email::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: none;
}

.profile-section {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-section:last-child {
  border-bottom: none;
  padding-bottom: 32px;
}

.profile-section-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: #86868B;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.profile-info-item {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.profile-info-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: #86868B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.profile-info-value {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.2px;
  position: relative;
  z-index: 1;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

.profile-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.profile-action-btn svg {
  flex-shrink: 0;
  color: #1D1D1F;
  position: relative;
  z-index: 1;
}



/* Symbol Button */
.symbol-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  height: 36px;
  background: transparent;
  color: #1D1D1F;
  border: none;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
  cursor: pointer;
  position: relative;
}

.symbol-btn::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 18px;
  background: rgba(0, 0, 0, 0.1);
}

.symbol-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.symbol-text {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: #1D1D1F;
}

.symbol-logo-small {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.symbol-chevron {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

/* Navbar Right */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-right: 20px;
}

/* Timeframe Dropdown */
.timeframe-dropdown-container {
  position: relative;
}

.timeframe-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-shadow: none;
  position: relative;
}

.timeframe-dropdown-btn::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 18px;
  background: rgba(0, 0, 0, 0.1);
}

.timeframe-dropdown-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.timeframe-text {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: #1D1D1F;
}

.timeframe-chevron {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.timeframe-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000;
  min-width: 140px;
  max-height: 480px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.timeframe-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.timeframe-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.timeframe-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(142, 142, 147, 0.2);
  border-radius: 3px;
}

.timeframe-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 142, 147, 0.3);
}

.timeframe-group-header {
  padding: 12px 16px 6px 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  color: #8E8E93;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.timeframe-group-header:first-child {
  border-top: none;
  padding-top: 8px;
}

.timeframe-dropdown-item {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: #48484A;
  border: none;
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  transition: all var(--transition-speed) ease;
  cursor: pointer;
}

.timeframe-dropdown-item:hover {
  background: rgba(142, 142, 147, 0.08);
  color: #1D1D1F;
}

.timeframe-dropdown-item.active {
  background: rgba(142, 142, 147, 0.12);
  color: #8E8E93;
  font-weight: 700;
}

/* Navbar Actions */
.navbar-actions {
  display: flex;
  align-items: center;
  margin-left: 0;
  padding-left: 36px;
  position: relative;
}

.navbar-actions::before {
  content: '';
  position: fixed;
  right: 67px;
  top: 24px;
  transform: translateY(-50%);
  height: 18px;
  width: 1.5px;
  background: rgba(0, 0, 0, 0.1);
}

/* --- Phone navbar menu -----------------------------------------------------
   Below 768px the navbar's icon buttons collapse into this menu behind the profile
   picture, so the picture can share the first row with the symbol and timeframe
   controls instead of the navbar wrapping onto a second row. The component only
   renders this under that breakpoint, so none of it reaches the desktop layout.
   It anchors to .navbar-actions, which is already position: relative above. */
.navbar-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.navbar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1201;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.navbar-menu.dark-mode {
  background: rgba(28, 28, 30, 0.98);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.navbar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.navbar-menu-item svg {
  flex-shrink: 0;
}

.navbar-menu-item:active {
  background: rgba(0, 0, 0, 0.06);
}

.navbar-menu-item.active {
  color: #667EEA;
}

.navbar-menu.dark-mode .navbar-menu-item {
  color: #F5F5F7;
}

.navbar-menu.dark-mode .navbar-menu-item:active {
  background: rgba(255, 255, 255, 0.08);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #1D1D1F;
  cursor: pointer;
  transition: background 0.15s ease;
}

.icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.icon-btn.active {
  background: rgba(102, 126, 234, 0.15);
  color: #8B9FFF;
}

.icon-btn.active:hover {
  background: rgba(102, 126, 234, 0.2);
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Replay Controls */
.replay-btn {
  padding: 6px 12px;
  min-height: 34px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.replay-btn:hover:not(:disabled) {
  color: #AEAEB2;
  border-color: rgba(142, 142, 147, 0.4);
  background: rgba(142, 142, 147, 0.08);
}

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

.replay-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.replay-timestamp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #1D1D1F;
  padding: 0 12px;
  min-width: 180px;
  text-align: center;
}

.replay-exit-btn {
  padding: 6px 12px;
  min-height: 34px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.replay-exit-btn:hover {
  color: #AEAEB2;
  border-color: rgba(142, 142, 147, 0.4);
  background: rgba(142, 142, 147, 0.08);
}

.replay-play-btn {
  font-size: 14px;
  min-width: 44px;
}

/* Speed Selector */
.speed-selector-container {
  position: relative;
}

.speed-selector-btn {
  padding: 6px 12px;
  min-height: 34px;
  min-width: 60px;
  background: rgba(142, 142, 147, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(142, 142, 147, 0.3);
  border-radius: 10px;
  color: #1D1D1F;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.speed-selector-btn:hover {
  color: #1D1D1F;
  border-color: rgba(142, 142, 147, 0.4);
  background: rgba(142, 142, 147, 0.25);
}

.speed-dropdown-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  z-index: 10000;
  min-width: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.speed-dropdown-item {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  transition: all var(--transition-speed) ease;
  cursor: pointer;
}

.speed-dropdown-item:hover {
  background: rgba(142, 142, 147, 0.08);
  color: var(--text-primary);
}

.speed-dropdown-item.active {
  background: rgba(142, 142, 147, 0.12);
  color: #8E8E93;
  font-weight: 700;
}

/* ========================================
   CHART LAYOUT & TOOLBAR
   ======================================== */
.chart-layout {
  display: flex;
  flex: 1;
  overflow: visible;
  min-height: 0;
  position: relative;
}

.drawing-toolbar {
  width: 44px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(80px) saturate(200%);
  -webkit-backdrop-filter: blur(80px) saturate(200%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 0 12px 0 0;
  margin: 8px 0 0 0;
  position: relative;
  z-index: 10;
  height: calc(100% + 36px);
  /* Scroll vertically instead of overflowing when the window is too short */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.drawing-toolbar::-webkit-scrollbar {
  display: none;
}

.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #3A3A3C;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tool-btn svg {
  width: 20px;
  height: 20px;
}

.tool-btn:hover {
  color: #1D1D1F;
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
}

.tool-btn.active {
  color: #667EEA;
  border-color: rgba(102, 126, 234, 0.2);
  background: rgba(102, 126, 234, 0.1);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.tool-divider {
  width: 28px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 8px 0;
}

/* ========================================
   PEN TOOLBAR
   ======================================== */
.pen-toolbar {
  position: absolute;
  z-index: 100;
  background: rgba(248, 248, 248, 0.95);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  user-select: none;
  overflow: visible;
}

.pen-toolbar-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: grab;
  padding: 8px 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  min-height: 36px;
}

.pen-toolbar-handle:active {
  cursor: grabbing;
}

.pen-toolbar-handle svg {
  opacity: 0.3;
}

.pen-toolbar-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0;
}

.pen-toolbar-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  min-height: 36px;
  gap: 4px;
  position: relative;
}

.pen-toolbar-section:last-of-type {
  border-right: none;
}

.pen-toolbar-section.pen-dropdown-section {
  padding: 0;
}

.pen-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pen-tool-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #333;
}

.pen-tool-btn.active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: #000;
}

/* Color Selector */
.pen-current-color {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  min-height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.pen-current-color:hover {
  background: rgba(0, 0, 0, 0.05);
}

.pen-color-display {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  position: relative;
}

.pen-color-display::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.pen-dropdown-icon {
  color: #999;
  transition: transform 0.2s ease;
}

.pen-current-color:hover .pen-dropdown-icon {
  color: #333;
}

/* Color Dropdown */
.pen-color-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: rgba(248, 248, 248, 0.98);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: dropdownSlideIn 0.2s ease-out;
}

.pen-color-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  max-width: 280px;
}

.pen-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.pen-color-swatch::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.pen-color-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.pen-color-swatch.active {
  border-color: #000;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Thickness Selector */
.pen-current-thickness {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  min-height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.pen-current-thickness:hover {
  background: rgba(0, 0, 0, 0.05);
}

.pen-thickness-text {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  min-width: 28px;
  text-align: center;
}

.pen-current-thickness:hover .pen-thickness-text {
  color: #333;
}

/* Thickness Dropdown */
.pen-thickness-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: rgba(248, 248, 248, 0.98);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 140px;
  animation: dropdownSlideIn 0.2s ease-out;
}

.pen-thickness-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
  width: 100%;
}

.pen-thickness-option:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #333;
}

.pen-thickness-option.active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: #000;
}

.pen-thickness-option span {
  font-size: 11px;
  font-weight: 600;
  min-width: 28px;
}

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

.pen-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: transparent;
  border: none;
  color: #FF3B30;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
  white-space: nowrap;
}

.pen-clear-btn:hover {
  background: rgba(255, 59, 48, 0.1);
  color: #FF3B30;
}

.pen-clear-btn svg {
  color: currentColor;
}

/* Opacity Control */
.pen-opacity-control {
  padding: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Custom Color Adder */
.custom-color-adder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(248, 248, 248, 0.98);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 10001;
  display: flex;
  flex-direction: column;
}

.custom-color-header {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.custom-color-hex-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 13px;
  font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
  text-transform: uppercase;
  background: white;
  color: #000;
}

.custom-color-hex-input:focus {
  outline: none;
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.custom-color-add-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  border: none;
  background: #007AFF;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-color-add-btn:hover {
  background: #0051D5;
}

.custom-color-cancel-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-color-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.custom-color-picker-container {
  display: flex;
  gap: 8px;
}

.custom-color-spectrum {
  flex: 1;
  height: 140px;
  border-radius: 6px;
  position: relative;
  cursor: crosshair;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.custom-color-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.custom-color-hue-slider {
  width: 20px;
  height: 140px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: linear-gradient(to bottom,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

.custom-color-hue-marker {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 6px;
  border: 2px solid white;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.color-picker-add-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.color-picker-add-btn:hover {
  color: #007AFF;
  background: rgba(0, 122, 255, 0.08);
}

/* Custom Colors Row */
.custom-colors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.custom-color-swatch-wrapper {
  position: relative;
  display: inline-block;
}

.custom-color-swatch-wrapper .color-picker-swatch {
  width: 20px;
  height: 20px;
}

.custom-color-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FF3B30;
  color: white;
  border: 2px solid rgba(248, 248, 248, 0.98);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-color-delete:hover {
  background: #D70015;
  transform: scale(1.1);
}

.pen-opacity-label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pen-opacity-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pen-opacity-slider {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pen-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007AFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pen-opacity-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.pen-opacity-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007AFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pen-opacity-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.pen-opacity-value {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  min-width: 38px;
  text-align: right;
}

.drawing-popup {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
}

.drawing-popup.dark-mode {
  background: rgba(30, 30, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.drawing-popup-colors {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.drawing-popup-color-btn {
  width: 100%;
  padding: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  color: #10B981;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawing-popup.dark-mode .drawing-popup-color-btn {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
}

.drawing-popup-color-btn:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.drawing-popup.dark-mode .drawing-popup-color-btn:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.5);
}

.drawing-popup-delete {
  width: 100%;
  padding: 8px;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
  border-radius: 8px;
  color: #FF3B30;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawing-popup.dark-mode .drawing-popup-delete {
  background: rgba(255, 59, 48, 0.15);
  border: 1px solid rgba(255, 59, 48, 0.3);
  color: #FF6B6B;
}

.drawing-popup-delete:hover {
  background: rgba(255, 59, 48, 0.15);
  border-color: rgba(255, 59, 48, 0.4);
  transform: translateY(-1px);
}

.drawing-popup.dark-mode .drawing-popup-delete:hover {
  background: rgba(255, 59, 48, 0.25);
  border-color: rgba(255, 59, 48, 0.5);
}

.text-input-popup {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.text-input-field {
  background: transparent;
  border: none;
  outline: none;
  color: #1D1D1F;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  width: 160px;
}

.text-input-confirm {
  background: rgba(142, 142, 147, 0.15);
  border: 1px solid rgba(142, 142, 147, 0.3);
  border-radius: 6px;
  color: #8E8E93;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.text-input-confirm:hover {
  background: rgba(142, 142, 147, 0.25);
  transform: scale(1.05);
}

/* Context Menu */
.context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 249;
}

.context-menu {
  position: fixed;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 250;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #1D1D1F;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-menu-item:hover {
  border-color: rgba(142, 142, 147, 0.2);
  background: rgba(142, 142, 147, 0.08);
  color: #8E8E93;
}

.context-menu-item svg {
  color: #8E8E93;
}

/* Keyboard hint, pushed to the right edge of the item */
.context-menu-shortcut {
  margin-left: auto;
  padding-left: 16px;
  color: #8E8E93;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

/* Context Menu - Dark Mode. Same treatment as .drawing-popup.dark-mode: both are
   blurred floating popups over the chart, so they share a surface. */
.dark-mode .context-menu {
  background: rgba(30, 30, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark-mode .context-menu-item {
  color: #FFFFFF;
}

/* Light mode dims the label to grey on hover; keep that shift, but stop at a grey
   that still reads against the dark surface. */
.dark-mode .context-menu-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #C7C7CC;
}

/* The hint stays quieter than the label it sits next to, in both themes. */
.dark-mode .context-menu-shortcut {
  color: #6E6E73;
}

.dark-mode .context-menu-item:hover .context-menu-shortcut {
  color: #8E8E93;
}

/* Settings Modal */
.settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-settings-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-settings-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-settings-header h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  color: #1D1D1F;
  margin: 0;
}

.settings-modal-close {
  background: transparent;
  border: none;
  color: #1D1D1F;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.chart-settings-color-picker {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 278px;
  background: rgba(248, 248, 248, 0.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  animation: dropdownSlideIn 0.2s ease-out;
}

.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  width: 254px;
  margin: 0 auto;
}

.color-picker-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  position: relative;
  box-sizing: border-box;
}

.color-picker-swatch::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.color-picker-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.color-picker-swatch.active {
  border-color: #000;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}



.chart-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  margin: 8px;
  border-radius: 16px;
  border: 1px solid rgba(142, 142, 147, 0.1);
  box-shadow: 
    0 8px 32px rgba(142, 142, 147, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  z-index: 1;
}

.chart {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  overflow: hidden;
}

/* Loading Overlay */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.loading-box {
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: #1D1D1F;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* ========================================
   BACKTEST FLOATING CARD
   ======================================== */
.backtest-card {
  position: absolute;
  top: 8px;
  right: 85px;
  width: 240px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 16px;
  z-index: 50;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

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

.backtest-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #48484A;
  text-transform: uppercase;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed) ease;
}

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

.backtest-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

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

.stat-row.highlight {
  padding: 12px;
  background: rgba(142, 142, 147, 0.08);
  border: 1px solid rgba(142, 142, 147, 0.2);
  border-radius: 10px;
  margin: 4px 0;
}

.stat-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  color: #48484A;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: #1D1D1F;
}

.stat-value-large {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  color: #1D1D1F;
}

.apply-best-btn {
  width: 100%;
  padding: 10px;
  background: rgba(142, 142, 147, 0.1);
  color: #8E8E93;
  border: 1px solid rgba(142, 142, 147, 0.2);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  transition: all var(--transition-speed) ease;
}

.apply-best-btn:hover {
  background: rgba(142, 142, 147, 0.15);
  border-color: rgba(142, 142, 147, 0.3);
  box-shadow: 0 2px 12px rgba(142, 142, 147, 0.2);
  transform: translateY(-1px);
}

/* Backtesting Dashboard (Top-Right Permanent) */
.backtest-dashboard {
  position: absolute;
  top: 58px;
  right: 10px;
  width: 200px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(142, 142, 147, 0.2);
  border-radius: 12px;
  padding: 12px;
  z-index: 50;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  font-family: var(--font-ui);
}

.backtest-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(142, 142, 147, 0.2);
}

.backtest-dashboard-title {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #48484A;
  text-transform: uppercase;
}

.backtest-dashboard-section {
  margin: 8px 0;
}

.backtest-dashboard-subtitle {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #8E8E93;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.backtest-dashboard-row {
  margin: 8px 0;
}

.backtest-dashboard-label {
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #8E8E93;
  text-transform: uppercase;
}

.backtest-dashboard-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.backtest-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: rgba(142, 142, 147, 0.08);
  border-radius: 6px;
}

.backtest-stat-item.highlight {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.backtest-stat-label {
  font-weight: 500;
  font-size: 9px;
  color: #8E8E93;
  letter-spacing: 0.05em;
}

.backtest-stat-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  color: #1D1D1F;
}

.backtest-stat-value-large {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: #10B981;
}

.backtest-dashboard-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(142, 142, 147, 0.2);
}

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

.backtest-param-label {
  font-weight: 500;
  font-size: 9px;
  color: #8E8E93;
  letter-spacing: 0.05em;
}

.backtest-param-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: #1D1D1F;
}

/* Backtest Results in Settings Modal */
.indicator-backtest-results {
  margin-top: 16px;
  padding: 16px;
  background: rgba(142, 142, 147, 0.08);
  border: 1px solid rgba(142, 142, 147, 0.2);
  border-radius: 12px;
}

.backtest-results-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(142, 142, 147, 0.2);
}

.backtest-results-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #48484A;
  text-transform: uppercase;
}

.backtest-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.backtest-result-item {
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.backtest-result-item.best {
  grid-column: 1 / -1;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.backtest-result-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 9px;
  color: #8E8E93;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.backtest-result-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: #1D1D1F;
}

.backtest-result-value.highlight {
  font-size: 18px;
  font-weight: 700;
  color: #10B981;
}

.apply-backtest-btn {
  width: 100%;
  padding: 10px;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  transition: all var(--transition-speed) ease;
  cursor: pointer;
}

.apply-backtest-btn:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
}

/* ========================================
   BOTTOM STRIP
   ======================================== */
.bottom-strip {
  height: 44px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(80px) saturate(200%);
  -webkit-backdrop-filter: blur(80px) saturate(200%);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-left: 52px;
  gap: 15px;
  flex-shrink: 0;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 12px 0 0 0;
  /* Scroll horizontally instead of overlapping when the window is too narrow */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.bottom-strip::-webkit-scrollbar {
  display: none;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.strip-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  color: #8E8E93;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.strip-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: #1D1D1F;
}

.strip-value.trend-up {
  color: var(--success-green);
}

.strip-value.trend-down {
  color: var(--danger-red);
}

.time-display {
  transition: opacity 0.2s ease;
  user-select: none;
}

.time-display:hover {
  opacity: 0.7;
}

/* ========================================
   SYMBOL MODAL
   ======================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbol-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 760px;
  max-width: calc(100vw - 32px);
  max-height: 82vh;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  z-index: 1501;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.modal-header {
  padding: 22px 24px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 26px;
  color: #1D1D1F;
  margin: 0;
  letter-spacing: -0.01em;
}

.modal-search {
  position: relative;
  padding: 0 24px 16px;
}

.modal-search-icon {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

.modal-search input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  background: rgba(120, 120, 128, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  transition: all var(--transition-speed) ease;
}

.modal-search input:focus {
  border-color: #8E8E93;
  background: rgba(120, 120, 128, 0.12);
  outline: none;
  box-shadow: 0 0 0 4px rgba(142, 142, 147, 0.1);
}

.modal-search input::placeholder {
  color: var(--text-secondary);
}

/* Category Filter Buttons */
.category-filters {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  padding: 0 24px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.category-filters::-webkit-scrollbar {
  display: none;
}

.category-btn {
  flex: none;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  white-space: nowrap;
}

.category-btn:hover {
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.22);
}

.category-btn.active {
  background: #1D1D1F;
  color: #FFFFFF;
  border-color: #1D1D1F;
}

.category-btn.active:hover {
  background: #000000;
  border-color: #000000;
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 12px;
}

.symbol-section {
  margin-bottom: 4px;
}

.symbol-section:last-child {
  margin-bottom: 0;
}

.section-header {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #8E8E93;
  padding: 12px 24px 6px;
  text-transform: uppercase;
}

.soon-badge {
  font-size: 9px;
  padding: 2px 8px;
  background-color: rgba(142, 142, 147, 0.1);
  color: #8E8E93;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.symbol-list {
  display: flex;
  flex-direction: column;
}

.symbol-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--font-ui);
  color: var(--text-primary);
  text-align: left;
  transition: background var(--transition-speed) ease;
  cursor: pointer;
  width: 100%;
}

.symbol-section:last-child .symbol-list .symbol-item:last-child {
  border-bottom: none;
}

.symbol-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: white;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.symbol-item-main {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex: 1;
  min-width: 0;
}

.symbol-ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.symbol-fullname {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.symbol-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  justify-content: flex-end;
  min-width: 150px;
}

.symbol-type {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: lowercase;
  white-space: nowrap;
}

.symbol-source {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.symbol-favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #C7C7CC;
  font-size: 16px;
  cursor: pointer;
  transition: opacity var(--transition-speed) ease, color var(--transition-speed) ease;
  opacity: 0;
  flex-shrink: 0;
}

.symbol-item:hover .symbol-favorite-btn {
  opacity: 1;
}

.symbol-favorite-btn.favorite {
  opacity: 1;
  color: #F5C518;
}

.symbol-favorite-btn:hover {
  color: #B17B00;
}

.symbol-item:not(.disabled):hover {
  background: rgba(0, 0, 0, 0.035);
}

.symbol-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--text-secondary);
}

/* ========================================
   SETTINGS DRAWER
   ======================================== */
.settings-drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 480px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 1501;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  overflow: hidden;
}

.settings-drawer.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: all;
}

.drawer-header {
  padding: 24px 24px 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-header h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 18px;
  color: #1D1D1F;
  margin: 0;
  letter-spacing: 0.5px;
}

.drawer-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Per-indicator settings modal (EMA/SMA/BB/VWAP/S&R). Adopts the Swift Algo X panel's
   proportions and header weight so the two read as the same surface; the rows inside use
   that panel's .indicator-param-row / .param-row-head classes directly.
   Scoped, because .drawer-header and .drawer-content are shared with the watchlist drawer. */
.settings-drawer.indicator-params-modal {
  width: 520px;
  border-radius: 16px;
}

.settings-drawer.indicator-params-modal .drawer-header {
  padding: 20px 24px;
}

.settings-drawer.indicator-params-modal .drawer-header h3 {
  font-size: 20px;
  letter-spacing: normal;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  color: #48484A;
  margin-bottom: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  color: #1D1D1F;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition-speed) ease;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #8E8E93;
  outline: none;
  box-shadow: 0 0 0 4px rgba(142, 142, 147, 0.1);
}

.form-group-checkbox {
  display: flex;
  align-items: center;
}

.form-group-checkbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

.form-group-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-gray);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.form-group-checkbox span {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  color: #48484A;
  letter-spacing: 0.08em;
}

.apply-btn {
  width: calc(100% - 48px);
  margin: 0 24px 24px 24px;
  padding: 14px;
  background: linear-gradient(135deg, #8E8E93, #AEAEB2);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  transition: all var(--transition-speed) ease;
  box-shadow: 0 4px 15px rgba(142, 142, 147, 0.25);
}

.apply-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(142, 142, 147, 0.35);
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1500;
}

/* ========================================
   WATCHLIST DRAWER
   ======================================== */
.watchlist-drawer {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 360px;
  max-height: calc(100vh - 100px);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-10px);
}

.watchlist-drawer.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* ========================================
   POSITION SIZE CALCULATOR
   Same shell as the watchlist drawer so the two read as one family
   ======================================== */
.position-calc-drawer {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 340px;
  max-height: calc(100vh - 100px);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-10px);
}

.position-calc-drawer.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.calc-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.calc-field-wide {
  grid-column: 1 / -1;
}

.calc-field-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #48484A;
}

.calc-optional {
  font-weight: 500;
  color: #8E8E93;
  text-transform: none;
  letter-spacing: 0;
}

.calc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.calc-input {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  color: #1D1D1F;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: all 0.15s ease;
}

.calc-input.has-prefix {
  padding-left: 24px;
}

.calc-input.has-suffix {
  padding-right: 26px;
}

/* Spinners crowd an already narrow field and nobody steps prices with them */
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-input-prefix,
.calc-input-suffix {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
  pointer-events: none;
}

.calc-input-prefix {
  left: 11px;
}

.calc-input-suffix {
  right: 11px;
}

.calc-empty {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #8E8E93;
  padding: 4px 2px;
}

.calc-error {
  color: var(--danger-red);
}

.calc-result {
  text-align: center;
  padding: 16px 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  margin-bottom: 16px;
}

.calc-result-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #48484A;
  margin-bottom: 8px;
}

.calc-direction {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.calc-direction.long {
  background: rgba(52, 199, 89, 0.14);
  color: #1E8E3E;
}

.calc-direction.short {
  background: rgba(255, 59, 48, 0.12);
  color: #C7261C;
}

.calc-result-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #1D1D1F;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.calc-result-sub {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  color: #8E8E93;
  margin-top: 4px;
}

.calc-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: #48484A;
}

.calc-row-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #1D1D1F;
  text-align: right;
  overflow-wrap: anywhere;
}

.calc-risk {
  color: var(--danger-red);
}

.calc-reward {
  color: #1E8E3E;
}

.calc-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255, 149, 0, 0.1);
  border: 1px solid rgba(255, 149, 0, 0.22);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: #9A5B00;
}

.watchlist-create-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.watchlist-name-input,
.symbol-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.watchlist-name-input:focus,
.symbol-input:focus {
  border-color: #8E8E93;
  outline: none;
  box-shadow: 0 0 0 4px rgba(142, 142, 147, 0.1);
}

.create-watchlist-btn,
.add-symbol-btn {
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #8E8E93, #AEAEB2);
  border: none;
  border-radius: 10px;
  color: white;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 15px rgba(142, 142, 147, 0.25);
}

.create-watchlist-btn:hover,
.add-symbol-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(142, 142, 147, 0.35);
}

.watchlists-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.watchlist-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.watchlist-header h4 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: #1D1D1F;
  margin: 0;
}

.watchlist-actions {
  display: flex;
  gap: 8px;
}

.watchlist-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.15s ease;
}

.watchlist-action-btn:hover {
  background: rgba(142, 142, 147, 0.1);
  border-color: #8E8E93;
}

.watchlist-action-btn.delete:hover {
  background: rgba(255, 59, 48, 0.1);
  border-color: #FF3B30;
  color: #FF3B30;
}

.add-symbol-section {
  display: flex;
  gap: 8px;
  align-items: center;
}

.add-symbol-section .symbol-input {
  flex: 1;
}

.add-symbol-section .add-symbol-btn {
  width: auto;
  padding: 10px 20px;
}

.symbols-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.symbol-btn-watchlist {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.symbol-btn-watchlist:hover {
  background: rgba(142, 142, 147, 0.1);
  border-color: #8E8E93;
  color: #8E8E93;
}

.remove-symbol-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: #8E8E93;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.remove-symbol-btn:hover {
  background: rgba(255, 59, 48, 0.1);
  border-color: #FF3B30;
  color: #FF3B30;
}

.empty-watchlist,
.no-watchlists {
  padding: 20px;
  text-align: center;
  color: #8E8E93;
  font-family: var(--font-ui);
  font-size: 13px;
  font-style: italic;
}

/* ========================================
   HIDE LIGHTWEIGHT CHARTS WATERMARK
   ======================================== */
div[class*="tv-lightweight-charts"] a,
div[class*="tv-lightweight-charts"] img,
.tv-lightweight-charts a,
.tv-lightweight-charts img,
div[style*="position: absolute"][style*="right"][style*="bottom"] a,
div[style*="position: absolute"][style*="right"][style*="bottom"] img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
.drawer-content::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 8px;
}

.drawer-content::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}

.drawer-content::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.drawer-content::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ========================================
   REPLAY MODAL MODES
   ======================================== */
.replay-modal {
  max-width: 500px;
}

.replay-mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.replay-mode-btn {
  width: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-speed) ease;
  cursor: pointer;
}

.replay-mode-btn:hover {
  background: rgba(142, 142, 147, 0.1);
  border-color: rgba(142, 142, 147, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(142, 142, 147, 0.15);
}

.replay-mode-icon {
  font-size: 32px;
  color: #8E8E93;
}

.replay-mode-text {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  color: #1D1D1F;
}

.replay-mode-desc {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
}

.replay-mode-divider {
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 2px;
}

.replay-mode-datetime {
  padding: 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.replay-datetime-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 500;
  color: #48484A;
}

.replay-datetime-input {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-size: 14px;
  font-family: var(--font-mono);
  transition: all 0.15s ease;
}

.replay-datetime-input:focus {
  outline: none;
  border-color: rgba(142, 142, 147, 0.4);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(142, 142, 147, 0.15);
}

.replay-mode-footer {
  margin-top: 16px;
  font-size: 12px;
  font-family: var(--font-ui);
  color: #8E8E93;
  text-align: center;
  line-height: 1.5;
}

/* ========================================
   CHART SELECTION MODE
   ======================================== */
.selection-crosshair-horizontal {
  position: fixed;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed #8E8E93;
  pointer-events: none;
  z-index: 900;
  opacity: 0.8;
}

.selection-tooltip {
  position: fixed;
  background: rgba(142, 142, 147, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  z-index: 901;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(142, 142, 147, 0.3);
}

.journal-stat-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  cursor: help;
  opacity: 0.5;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.journal-stat-info:hover {
  opacity: 1;
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.journal-stat-info::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: linear-gradient(135deg, rgba(30, 30, 35, 0.98) 0%, rgba(20, 20, 25, 0.98) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: #E5E7EB;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: normal;
  width: 260px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  line-height: 1.6;
  letter-spacing: 0.2px;
}

.journal-stat-info:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dark-mode .journal-stat-info::after {
  background: linear-gradient(135deg, rgba(30, 30, 35, 0.98) 0%, rgba(20, 20, 25, 0.98) 100%);
  color: #E5E7EB;
}

.journal-stat-info::before {
  content: '';
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(30, 30, 35, 0.98);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 99999;
  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.3));
}

.journal-stat-info:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   INDICATORS
   ======================================== */
.indicators-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-shadow: none;
  position: relative;
}

.indicators-btn::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 18px;
  background: rgba(0, 0, 0, 0.1);
}

.indicators-btn:last-child::after {
  display: none;
}

.indicators-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* The Backtest button in the Swift Algo X settings borrows .indicators-btn from the bottom
   strip, where buttons sit in a row divided by ::after separators and are deliberately
   borderless. In the settings modal there is no separator and every neighbouring control
   is outlined, so it needs an outline of its own - matched to the modal's inputs/selects.
   Scoped to this extra class so the bottom-strip buttons stay borderless. */
.indicators-btn.indicator-backtest-btn {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.indicators-btn.indicator-backtest-btn:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

.indicators-btn.active-dashboard {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.indicators-btn.active-dashboard:hover {
  background: rgba(16, 185, 129, 0.25);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.indicators-btn.active-dashboard svg {
  stroke: #10B981;
}

.indicators-btn svg {
  stroke: #1D1D1F;
  width: 18px;
  height: 18px;
}

.indicators-text {
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
}

.indicators-count {
  background: rgba(102, 126, 234, 0.25);
  color: #A5B4FC;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 10px;
  font-weight: 700;
  line-height: 1;
}

.indicator-modal {
  position: absolute;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  width: 600px;
  max-height: min(780px, 85vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

.indicator-modal-handle {
  display: flex;
  justify-content: center;
  color: #C7C7CC;
  cursor: grab;
  padding: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.indicator-modal-handle:active {
  cursor: grabbing;
}

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

.indicator-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 10px;
  transition: background 0.15s ease;
  cursor: pointer;
}

.indicator-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.indicator-item-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.indicator-item-name {
  font-size: 15px;
  color: #1D1D1F;
  font-weight: 500;
}

.indicator-item-desc {
  font-size: 12px;
  color: #8E8E93;
}

.indicator-add-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(142, 142, 147,0.1);
  border: 1px solid rgba(142, 142, 147,0.25);
  border-radius: 7px;
  color: #AEAEB2;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.indicator-add-btn:hover {
  background: rgba(142, 142, 147,0.2);
  border-color: rgba(142, 142, 147,0.5);
}

.indicator-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.indicator-item:hover .symbol-favorite-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.active-indicator-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(142, 142, 147,0.05);
  border: 1px solid rgba(142, 142, 147,0.1);
  border-radius: 8px;
  margin-bottom: 4px;
}

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

.active-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.active-indicator-name {
  font-size: 13px;
  color: #1D1D1F;
  font-weight: 500;
}

.active-indicator-param {
  font-size: 11px;
  color: #8E8E93;
  font-family: 'JetBrains Mono', monospace;
}

.active-indicator-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.indicator-settings-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.15s ease;
}

.indicator-settings-btn:hover {
  color: #48484A;
  border-color: rgba(142, 142, 147,0.3);
  background: rgba(142, 142, 147,0.08);
}

.indicator-visibility-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.15s ease;
}

.indicator-visibility-btn:hover {
  color: #48484A;
  border-color: rgba(142, 142, 147,0.3);
  background: rgba(142, 142, 147,0.08);
}

.swift-algo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(142, 142, 147,0.08);
  border: 1px solid rgba(142, 142, 147,0.15);
  border-radius: 8px;
  margin-bottom: 4px;
}

.indicator-remove-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #8E8E93;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.indicator-remove-btn:hover {
  color: #FF3B30;
  border-color: rgba(255,59,48,0.3);
  background: rgba(255,59,48,0.08);
}

.indicator-settings-panel {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.indicator-param-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.indicator-param-row label {
  font-size: 13px;
  font-weight: 500;
  color: #48484A;
}

/* Label line of a setting, with its info "i" pinned to the right edge of the row. */
.param-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Keeps a long label from pushing the icon off the row */
.param-row-head > label {
  flex: 1;
  min-width: 0;
}

.info-tip-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #AEAEB2;
  cursor: help;
  transition: color 0.15s ease, background 0.15s ease;
}

.info-tip-btn:hover,
.info-tip-btn.open {
  color: #1D1D1F;
  background: rgba(0, 0, 0, 0.06);
}

/* Above the settings modal (z-index 10000), same as the sensitivity menu */
.info-tip-popover {
  z-index: 10002;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  color: #48484A;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  /* Copy with newlines in it (the sensitivity suggestions) renders as a list */
  white-space: pre-line;
  animation: dropdownSlideIn 0.15s ease-out;
  /* Never let the card swallow a click meant for the panel underneath */
  pointer-events: none;
}

.indicator-param-row input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 500;
  outline: none;
  -moz-appearance: textfield;
}

.indicator-param-row input[type="number"]::-webkit-outer-spin-button,
.indicator-param-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.indicator-param-row input[type="number"]:focus {
  border-color: rgba(142, 142, 147,0.4);
  box-shadow: 0 0 0 3px rgba(142, 142, 147,0.1);
}

.indicator-param-row input[type="color"] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0;
  background: none;
  transition: all 0.2s ease;
}

.indicator-param-row input[type="color"]:hover {
  transform: scale(1.1);
  border-color: rgba(0, 0, 0, 0.3);
}

.indicator-apply-btn {
  width: 100%;
  padding: 8px;
  margin-top: 8px;
  background: rgba(142, 142, 147,0.15);
  border: 1px solid rgba(142, 142, 147,0.3);
  border-radius: 6px;
  color: #AEAEB2;
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.15s ease;
}

/* New Tabbed Settings Modal */
.indicator-settings-modal-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.indicator-settings-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.indicator-settings-modal-header h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  color: #1D1D1F;
  margin: 0;
}

.indicator-settings-tabs {
  display: flex;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  padding: 0 24px;
  gap: 0;
}

.indicator-settings-tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8E8E93;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -2px;
}

.indicator-settings-tab:hover {
  color: #48484A;
}

.indicator-settings-tab.active {
  color: #1D1D1F;
  border-bottom-color: #1D1D1F;
}

.indicator-settings-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  max-height: calc(80vh - 200px);
  min-height: 300px;
}

.indicator-settings-tab-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-section-header {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: #48484A;
  letter-spacing: 0.5px;
  padding: 8px 0 4px;
  margin-top: 8px;
}

.indicator-param-row select {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 500;
  outline: none;
  cursor: pointer;
}

.indicator-param-row select:focus {
  border-color: rgba(142, 142, 147, 0.4);
  box-shadow: 0 0 0 3px rgba(142, 142, 147, 0.1);
}

/* The signal-frequency block (mode + Custom EMA + EMA period) starts a new group after the
   Trade Checker toggle, and the container's uniform 16px gap did not read as a break.
   Adds to that gap rather than replacing it: 16 + 12 = 28px above this row only. */
.indicator-param-row.signal-mode-row {
  margin-top: 12px;
}


/* Signal frequency - segmented control.
   Replaces a native <select> for three mutually exclusive options. Showing all three at
   once makes the Spam -> Rapid -> Default ordering (most signals to fewest) readable at a
   glance rather than hiding two of them behind a dropdown. */
.signal-mode-segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.signal-mode-option {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: #48484A;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.signal-mode-option:hover:not(.active) {
  background: rgba(0, 0, 0, 0.05);
  color: #1D1D1F;
}

/* The selected segment lifts off the track rather than filling with an accent colour,
   which keeps it quiet next to the coloured controls further down the panel. */
.signal-mode-option.active {
  background: #FFFFFF;
  color: #1D1D1F;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.signal-mode-option:focus-visible {
  outline: 2px solid rgba(142, 142, 147, 0.5);
  outline-offset: 1px;
}

/* Indicator Sensitivity - custom picker replacing the native <select>, which renders as
   the OS widget and ignores the app's theming entirely. The trigger deliberately matches
   .indicator-param-row input/select so the row still lines up with the number fields
   around it; only the popup is new. */
.sensitivity-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sensitivity-dropdown-btn:hover {
  border-color: rgba(142, 142, 147, 0.4);
}

/* Same focus treatment the panel's inputs use, so an open picker reads as the active field */
.sensitivity-dropdown-btn.open {
  border-color: rgba(142, 142, 147, 0.4);
  box-shadow: 0 0 0 3px rgba(142, 142, 147, 0.1);
}

.sensitivity-dropdown-chevron {
  flex-shrink: 0;
  color: #8E8E93;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sensitivity-dropdown-btn.open .sensitivity-dropdown-chevron {
  transform: rotate(180deg);
}

/* Above the settings modal, which sits at z-index 10000 */
.sensitivity-dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
}

.sensitivity-dropdown-menu {
  z-index: 10002;
  padding: 4px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  overflow-x: hidden;
  animation: dropdownSlideIn 0.18s ease-out;
}

.sensitivity-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.sensitivity-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.sensitivity-dropdown-item.active {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

.sensitivity-dropdown-item.active svg {
  color: #10B981;
}

.sensitivity-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.sensitivity-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.sensitivity-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(142, 142, 147, 0.2);
  border-radius: 3px;
}

/* ========================================
   INDICATOR PRESETS
   ======================================== */
.preset-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.preset-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.preset-select-btn:hover {
  border-color: rgba(142, 142, 147, 0.4);
}

.preset-select-btn.open {
  border-color: rgba(142, 142, 147, 0.4);
  box-shadow: 0 0 0 3px rgba(142, 142, 147, 0.1);
}

.preset-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-select-chevron {
  flex-shrink: 0;
  color: #8E8E93;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.preset-select-btn.open .preset-select-chevron {
  transform: rotate(180deg);
}

.preset-save-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.preset-save-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.07);
}

/* Inline list rather than a portalled popover, so it scrolls with the panel
   instead of detaching from its button. The section sits at the bottom of the
   Inputs tab, so opening it scrolls the new content into view (see the
   scrollIntoView effect that watches presetMenuOpen / isNamingPreset). */
.preset-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.preset-empty {
  padding: 10px 10px;
  color: #8E8E93;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

.preset-item {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.preset-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.preset-item.active {
  background: rgba(0, 0, 0, 0.06);
}

.preset-item-load {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.preset-item.active .preset-item-load {
  font-weight: 600;
}

.preset-item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: #8E8E93;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.preset-item-action:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.07);
  color: #1D1D1F;
}

.preset-item-action.danger:hover:not(:disabled) {
  background: rgba(255, 59, 48, 0.1);
  color: var(--danger-red);
}

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

.preset-name-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  outline: none;
}

.preset-name-confirm,
.preset-name-cancel {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.preset-name-confirm {
  background: #1D1D1F;
  color: #FFFFFF;
}

.preset-name-confirm:hover:not(:disabled) {
  background: #2C2C2E;
}

.preset-name-cancel {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.1);
  color: #48484A;
}

.preset-name-cancel:hover {
  background: rgba(0, 0, 0, 0.04);
}

.preset-message {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: #48484A;
  padding: 0 2px;
}

.preset-message.error {
  color: var(--danger-red);
}

.style-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.style-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
}

.style-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.style-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.style-color-row label {
  font-size: 13px;
  font-weight: 500;
  color: #48484A;
}

.style-color-row input[type="color"] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0;
  background: white;
  transition: all 0.2s ease;
}

.style-color-row input[type="color"]:hover {
  transform: scale(1.1);
  border-color: rgba(0, 0, 0, 0.3);
}

.visibility-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.visibility-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
}

.visibility-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.style-visibility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

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

.style-visibility-left input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.style-visibility-left span {
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
}

.style-visibility-right {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.style-visibility-right label {
  font-size: 13px;
  font-weight: 500;
  color: #48484A;
}

.chart-candles-select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1D1D1F;
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 500;
  outline: none;
  cursor: pointer;
  min-width: 100px;
}

.chart-candles-select:focus {
  border-color: rgba(142, 142, 147, 0.4);
  box-shadow: 0 0 0 3px rgba(142, 142, 147, 0.1);
}

.custom-color-picker-simple {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.custom-color-picker-simple .color-preview-simple {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.custom-color-picker-simple:hover .color-preview-simple {
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.indicator-settings-footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.indicator-reset-colors-btn {
  flex: 0 0 auto;
  padding: 12px 20px;
  background: rgba(142, 142, 147, 0.15);
  border: 1px solid rgba(142, 142, 147, 0.3);
  border-radius: 10px;
  color: #1D1D1F;
  font-size: 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.indicator-reset-colors-btn:hover {
  background: rgba(142, 142, 147, 0.25);
  border-color: rgba(142, 142, 147, 0.4);
}

.indicator-cancel-settings-btn {
  flex: 0 0 auto;
  padding: 12px 20px;
  background: rgba(142, 142, 147, 0.15);
  border: 1px solid rgba(142, 142, 147, 0.3);
  border-radius: 10px;
  color: #1D1D1F;
  font-size: 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.indicator-cancel-settings-btn:hover {
  background: rgba(142, 142, 147, 0.25);
  border-color: rgba(142, 142, 147, 0.4);
}

.indicator-apply-settings-btn {
  flex: 1;
  padding: 12px;
  background: rgba(142, 142, 147, 0.15);
  border: 1px solid rgba(142, 142, 147, 0.3);
  border-radius: 10px;
  color: #1D1D1F;
  font-size: 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.indicator-apply-settings-btn:hover {
  background: rgba(142, 142, 147, 0.25);
  border-color: rgba(142, 142, 147, 0.4);
}

.indicator-apply-btn:hover {
  background: rgba(142, 142, 147,0.25);
}

.indicator-apply-btn:active {
  background: rgba(142, 142, 147,0.35);
}

/* ========================================
   ASSET TICKER OVERLAY
   ======================================== */
.asset-ticker-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
  user-select: none;
  font-size: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #1D1D1F;
  line-height: 1;
}

.asset-ticker-symbol {
  color: #1D1D1F;
  font-weight: 700;
}

.asset-ticker-timeframe {
  color: #1D1D1F;
  font-weight: 700;
}

.asset-ticker-separator {
  color: #8E8E93;
  font-weight: 400;
}

.asset-ticker-price {
  color: #1D1D1F;
}

/* ========================================
   INDICATOR BADGES OVERLAY
   ======================================== */
.indicator-badges-overlay {
  position: absolute;
  top: 78px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 50;
  pointer-events: all;
}

.indicator-badge {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  transition: all 0.2s ease;
  cursor: default;
}

/* An oscillator's badge is portalled into its own pane rather than living in the overlay
   above, so it positions itself against that pane. `left` matches
   .indicator-badges-overlay so a pane legend lines up with the price-chart badges. The
   box shrink-wraps its content, leaving the rest of the pane free for the chart's own
   mouse handling. */
.indicator-badge-in-pane {
  position: absolute;
  top: 6px;
  left: 12px;
  z-index: 3;
  pointer-events: all;
}

.indicator-badge-content {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.indicator-badge-color {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.indicator-badge-name {
  font-size: 13px;
  font-weight: 500;
  color: #1D1D1F;
  font-family: var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.indicator-badge-icon-btn {
  background: transparent;
  border: none;
  color: #8E8E93;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0.8;
}

.indicator-badge-icon-btn:hover {
  opacity: 1;
  color: #48484A;
}

.indicator-badge-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  animation: badgeControlsFadeIn 0.15s ease-out;
}

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

.indicator-badge-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(142, 142, 147, 0.08);
  border: 1px solid rgba(142, 142, 147, 0.15);
  border-radius: 4px;
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.indicator-badge-btn:hover {
  background: rgba(142, 142, 147, 0.15);
  border-color: rgba(142, 142, 147, 0.3);
  color: #48484A;
}

.indicator-badge-delete:hover {
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.3);
  color: #FF3B30;
}

.indicator-badge-settings:hover {
  background: rgba(0, 122, 255, 0.08);
  border-color: rgba(0, 122, 255, 0.2);
  color: #007AFF;
}

.indicator-badge-inline-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 0 6px 6px;
  animation: badgeSettingsFadeIn 0.2s ease-out;
}

@keyframes badgeSettingsFadeIn {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}



.indicator-badge-clickable {
  cursor: pointer;
}

.indicator-badge-clickable:hover {
  color: #48484A;
}

.indicator-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 4px 0;
}

.indicator-badge-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.indicator-badge-icon-btn {
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ========================================
   DARK MODE STYLES
   ======================================== */

.dark-mode {
  background: #0A0A0A;
}

.dark-mode .chart-container {
  background: #0A0A0A;
}

.dark-mode .chart-wrapper {
  background: #000000;
  box-shadow: none;
  border: 1px solid #2A2A2A;
}

/* Navbar - Dark Mode */
.dark-mode .navbar {
  background: #0F0F0F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dark-mode .profile-picture {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  color: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.dark-mode .profile-picture:hover {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.4);
}

.dark-mode .logo-dot {
  color: #8B9FFF;
}

.dark-mode .logo-text {
  color: #FFFFFF;
}

/* Symbol Button - Dark Mode */
.dark-mode .symbol-btn {
  background: transparent;
  border-color: transparent;
  color: #F5F5F5;
}

.dark-mode .symbol-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .symbol-text {
  color: #FFFFFF;
  font-weight: 700;
}

.dark-mode .symbol-chevron {
  color: #E5E5EA;
}

.dark-mode .symbol-btn::after {
  background: rgba(255, 255, 255, 0.15);
}

/* Timeframe Dropdown - Dark Mode */
.dark-mode .timeframe-dropdown-btn {
  background: transparent;
  border-color: transparent;
  color: #F5F5F5;
}

.dark-mode .timeframe-dropdown-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .timeframe-text {
  color: #FFFFFF;
  font-weight: 600;
}

.dark-mode .timeframe-chevron {
  color: #E5E5EA;
}

.dark-mode .timeframe-dropdown-btn::after {
  background: rgba(255, 255, 255, 0.15);
}

.dark-mode .timeframe-dropdown-menu {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
}

.dark-mode .symbol-item {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-mode .symbol-item:not(.disabled):hover {
  background: rgba(255, 255, 255, 0.045);
}

.dark-mode .symbol-favorite-btn {
  color: #5A5A5E;
}

.dark-mode .symbol-item:hover .symbol-favorite-btn {
  opacity: 1;
}

.dark-mode .indicator-item:hover .symbol-favorite-btn {
  opacity: 1;
}

.dark-mode .symbol-favorite-btn.favorite {
  opacity: 1;
  color: #FFD24D;
}

.dark-mode .symbol-favorite-btn:hover {
  color: #FFE066;
}

.dark-mode .timeframe-option {
  background: transparent;
}

.dark-mode .timeframe-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .timeframe-option.active {
  background: rgba(255, 255, 255, 0.15);
}

/* Icons and Buttons - Dark Mode */
.dark-mode .icon-btn {
  width: 34px;
  height: 34px;
  color: #FFFFFF;
  background: transparent;
  border: 1px solid transparent;
}

.dark-mode .icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark-mode .icon-btn.active {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.dark-mode .icon-btn.active:hover {
  background: rgba(16, 185, 129, 0.3);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.6);
}

/* Drawing Toolbar - Dark Mode */
.dark-mode .drawing-toolbar {
  background: #111111;
  border: 1px solid #2A2A2A;
  box-shadow: none;
  padding: 12px 0;
  gap: 8px;
}

.dark-mode .tool-btn {
  color: #E5E5EA;
  background: transparent;
  width: 36px;
  height: 36px;
  padding: 8px;
}

.dark-mode .tool-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .tool-btn.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.15);
}

.dark-mode .tool-divider {
  background: rgba(255, 255, 255, 0.2);
  width: 28px;
  height: 1px;
  margin: 8px 0;
}

.dark-mode .tool-badge {
  background: #FFFFFF;
  color: #000000;
}

/* Pen Toolbar - Dark Mode */
.dark-mode .pen-toolbar {
  background: rgba(50, 50, 55, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.15);
}

.dark-mode .pen-toolbar-handle {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: #C7C7CC;
}

.dark-mode .pen-toolbar-section {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode .pen-tool-btn {
  color: #C7C7CC;
}

.dark-mode .pen-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.dark-mode .pen-tool-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.dark-mode .pen-current-color {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode .pen-current-color:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .pen-color-display {
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.dark-mode .pen-dropdown-icon {
  color: #C7C7CC;
}

.dark-mode .pen-current-color:hover .pen-dropdown-icon {
  color: #FFFFFF;
}

.dark-mode .pen-color-dropdown {
  background: rgba(70, 70, 75, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

.dark-mode .pen-color-swatch:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.dark-mode .pen-color-swatch.active {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.dark-mode .pen-current-thickness {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode .pen-current-thickness:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .pen-thickness-text {
  color: #C7C7CC;
}

.dark-mode .pen-current-thickness:hover .pen-thickness-text {
  color: #FFFFFF;
}

.dark-mode .pen-thickness-dropdown {
  background: rgba(70, 70, 75, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

.dark-mode .pen-thickness-option {
  color: #C7C7CC;
}

.dark-mode .pen-thickness-option:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.dark-mode .pen-thickness-option.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.dark-mode .pen-clear-btn {
  color: #FF453A;
}

.dark-mode .pen-clear-btn:hover {
  background: rgba(255, 69, 58, 0.15);
  color: #FF5F52;
}

/* Pen Opacity Control - Dark Mode */
.dark-mode .pen-opacity-control {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode .pen-opacity-label {
  color: #C7C7CC;
}

.dark-mode .pen-opacity-slider {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .pen-opacity-slider::-webkit-slider-thumb {
  background: #0A84FF;
  border-color: #1C1C1E;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dark-mode .pen-opacity-slider::-moz-range-thumb {
  background: #0A84FF;
  border-color: #1C1C1E;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dark-mode .pen-opacity-value {
  color: #C7C7CC;
}

/* Custom Color Adder - Dark Mode */
.dark-mode .custom-color-adder {
  background: rgba(70, 70, 75, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

.dark-mode .custom-color-hex-input {
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #E5E5EA;
}

.dark-mode .custom-color-hex-input:focus {
  border-color: #0A84FF;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}

.dark-mode .custom-color-add-btn {
  background: #0A84FF;
}

.dark-mode .custom-color-add-btn:hover {
  background: #0066CC;
}

.dark-mode .custom-color-cancel-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #E5E5EA;
}

.dark-mode .custom-color-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .custom-color-spectrum {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode .custom-color-hue-slider {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode .color-picker-add-btn {
  color: rgba(255, 255, 255, 0.4);
}

.dark-mode .color-picker-add-btn:hover {
  color: #0A84FF;
  background: rgba(10, 132, 255, 0.12);
}

.dark-mode .custom-colors-row {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode .custom-color-delete {
  background: #FF453A;
  border: 2px solid rgba(70, 70, 75, 0.98);
}

.dark-mode .custom-color-delete:hover {
  background: #FF2D20;
}

/* Color Picker - Dark Mode */
.dark-mode .color-display {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode .color-picker-popup {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Bottom Strip - Dark Mode */
.dark-mode .bottom-strip {
  background: #111111;
  border-top: 1px solid #2A2A2A;
  box-shadow: none;
}

.dark-mode .strip-label {
  color: #E5E5EA;
}

.dark-mode .strip-value {
  color: #FFFFFF;
}

/* Indicator Badges - Dark Mode */
.dark-mode .indicator-badges-overlay {
  color: #FFFFFF;
}

.dark-mode .indicator-badge {
  background: transparent;
  border: none;
  box-shadow: none;
}

.dark-mode .indicator-badge-name {
  color: #FFFFFF;
  font-weight: 600;
}

.dark-mode .indicator-badge-icon-btn {
  color: #E5E5EA;
}

.dark-mode .indicator-badge-icon-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

/* Asset Ticker - Dark Mode */
.dark-mode .asset-ticker-overlay {
  color: #FFFFFF;
  opacity: 1;
}

.dark-mode .asset-ticker-symbol {
  color: #FFFFFF;
  opacity: 1;
  font-weight: 700;
}

.dark-mode .asset-ticker-timeframe {
  color: #FFFFFF;
  opacity: 1;
  font-weight: 700;
}

.dark-mode .asset-ticker-separator {
  color: #FFFFFF;
  opacity: 1;
}

/* Modals - Dark Mode */
.dark-mode .profile-modal,
.dark-mode .alert-modal {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Matched to .dark-mode .indicator-modal. This was rgba(19, 22, 28, 0.94) - translucent
   and blue-tinted, where the indicator panel is a flat neutral grey - so the two read as
   different surfaces despite opening from adjacent buttons. The backdrop-filter on the
   base rule is left alone: it now has nothing to show through an opaque background, but
   the indicator modal carries a redundant one too, so removing only this one would be
   the odd case rather than the tidy one. */
.dark-mode .symbol-modal {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.dark-mode .chart-settings-modal {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.dark-mode .chart-settings-header {
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .chart-settings-header h3 {
  color: #FFFFFF;
}

.dark-mode .settings-modal-close {
  color: #E5E5EA;
}

.dark-mode .settings-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.dark-mode .chart-settings-color-picker {
  background: rgba(70, 70, 75, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

.dark-mode .color-picker-swatch::after {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark-mode .color-picker-swatch:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.dark-mode .color-picker-swatch.active {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}



.dark-mode .modal-header h3,
.dark-mode .drawer-header h3 {
  color: #FFFFFF;
}

.dark-mode .close-btn {
  color: #E5E5EA;
  background: transparent;
}

.dark-mode .close-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .modal-search-icon {
  color: #8E8E93;
}

.dark-mode .modal-search input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.dark-mode .modal-search input:focus {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.dark-mode .modal-search input::placeholder {
  color: #8E8E93;
}

.dark-mode .category-filters {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dark-mode .section-header {
  color: #8E8E93;
}

.dark-mode .soon-badge {
  background-color: rgba(255, 255, 255, 0.05);
  color: #8E8E93;
}

/* Settings Drawer - Dark Mode */
.dark-mode .settings-drawer {
  background: #1A1A1A;
  border-left: 2px solid #2A2A2A;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
}

.dark-mode .form-group label {
  color: #E5E5EA;
}

.dark-mode .form-group input,
.dark-mode .form-group select {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group select:focus {
  border-color: #3A3A3A;
  background: #0F0F0F;
}

/* Replay Modal - Dark Mode */
.dark-mode .replay-mode-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2A2A2A;
}

.dark-mode .replay-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #3A3A3A;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dark-mode .replay-mode-icon {
  color: #E5E5EA;
}

.dark-mode .replay-mode-text {
  color: #FFFFFF;
}

.dark-mode .replay-mode-desc {
  color: #8E8E93;
}

.dark-mode .replay-mode-divider {
  color: #8E8E93;
}

.dark-mode .replay-mode-datetime {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2A2A2A;
}

.dark-mode .replay-datetime-label {
  color: #E5E5EA;
}

.dark-mode .replay-datetime-input {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .replay-datetime-input:focus {
  border-color: #3A3A3A;
  background: #0F0F0F;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .replay-mode-footer {
  color: #8E8E93;
}

.dark-mode .selection-crosshair-horizontal {
  border-top-color: #E5E5EA;
  opacity: 0.6;
}

.dark-mode .selection-tooltip {
  background: rgba(26, 26, 26, 0.95);
  color: #FFFFFF;
  border: 1px solid #2A2A2A;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Indicator Modal - Dark Mode */
.dark-mode .indicator-modal {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.dark-mode .indicator-modal-handle {
  color: #8E8E93;
}

.dark-mode .indicator-item {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-mode .indicator-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode .indicator-item-name {
  color: #FFFFFF;
}

.dark-mode .indicator-item-desc {
  color: #8E8E93;
}

.dark-mode .indicator-add-btn {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode .indicator-add-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Tabbed Settings Modal - Dark Mode */
.dark-mode .indicator-settings-modal-wrapper {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.dark-mode .indicator-settings-modal-header {
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .indicator-settings-modal-header h3 {
  color: #FFFFFF;
}

.dark-mode .indicator-settings-tabs {
  border-bottom: 2px solid #2A2A2A;
}

.dark-mode .indicator-settings-tab {
  color: #8E8E93;
}

.dark-mode .indicator-settings-tab:hover {
  color: #E5E5EA;
}

.dark-mode .indicator-settings-tab.active {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.dark-mode .settings-section-header {
  color: #8E8E93;
}

.dark-mode .indicator-param-row label {
  color: #E5E5EA;
}

.dark-mode .indicator-param-row input[type="number"],
.dark-mode .indicator-param-row select {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .indicator-param-row input[type="number"]:focus,
.dark-mode .indicator-param-row select:focus {
  border-color: #3A3A3A;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

/* Info "i" and its card - dark mode */
.dark-mode .info-tip-btn {
  color: #6E6E73;
}

.dark-mode .info-tip-btn:hover,
.dark-mode .info-tip-btn.open {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .info-tip-popover {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #C7C7CC;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* Indicator Sensitivity picker - dark mode. Trigger matches the panel's inputs; the popup
   matches .timeframe-dropdown-menu, the navbar's equivalent picker. */
.dark-mode .sensitivity-dropdown-btn {
  background: #0A0A0A;
  border-color: #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .sensitivity-dropdown-btn:hover,
.dark-mode .sensitivity-dropdown-btn.open {
  border-color: #3A3A3A;
}

.dark-mode .sensitivity-dropdown-btn.open {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

/* Indicator presets - dark mode */
.dark-mode .preset-select-btn,
.dark-mode .preset-name-input {
  background: #0A0A0A;
  border-color: #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .preset-select-btn:hover,
.dark-mode .preset-select-btn.open {
  border-color: #3A3A3A;
}

.dark-mode .preset-select-btn.open {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.dark-mode .preset-save-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .preset-save-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .preset-menu {
  background: #0A0A0A;
  border-color: #2A2A2A;
}

.dark-mode .preset-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark-mode .preset-item.active {
  background: rgba(255, 255, 255, 0.09);
}

.dark-mode .preset-item-load {
  color: #FFFFFF;
}

.dark-mode .preset-item-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.dark-mode .preset-name-confirm {
  background: #FFFFFF;
  color: #1D1D1F;
}

.dark-mode .preset-name-confirm:hover:not(:disabled) {
  background: #E5E5EA;
}

.dark-mode .preset-name-cancel {
  border-color: #2A2A2A;
  color: #A1A1A6;
}

.dark-mode .preset-name-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark-mode .preset-message {
  color: #A1A1A6;
}

.dark-mode .preset-empty {
  color: #6E6E73;
}

.dark-mode .sensitivity-dropdown-menu {
  background: #1A1A1A;
  border-color: #2A2A2A;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.dark-mode .sensitivity-dropdown-item {
  color: #FFFFFF;
}

.dark-mode .sensitivity-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dark-mode .sensitivity-dropdown-item.active {
  background: rgba(255, 255, 255, 0.12);
}

.dark-mode .sensitivity-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* Segmented control - dark mode. Track border matches the inputs/selects above. */
.dark-mode .signal-mode-segmented {
  background: rgba(255, 255, 255, 0.04);
  border-color: #2A2A2A;
}

.dark-mode .signal-mode-option {
  color: #8E8E93;
}

.dark-mode .signal-mode-option:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

.dark-mode .signal-mode-option.active {
  background: #2A2A2A;
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dark-mode .signal-mode-option:focus-visible {
  outline-color: rgba(255, 255, 255, 0.4);
}

.dark-mode .indicator-param-row input[type="color"] {
  border: 2px solid #2A2A2A;
}

.dark-mode .indicator-param-row input[type="color"]:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.dark-mode .style-row,
.dark-mode .style-color-row,
.dark-mode .visibility-row,
.dark-mode .style-visibility-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-mode .style-checkbox-label,
.dark-mode .visibility-checkbox-label {
  color: #FFFFFF;
}

.dark-mode .style-color-row label {
  color: #E5E5EA;
}

.dark-mode .style-color-row input[type="color"] {
  background: #0A0A0A;
  border: 2px solid #2A2A2A;
}

.dark-mode .style-color-row input[type="color"]:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.dark-mode .style-visibility-left span {
  color: #FFFFFF;
}

.dark-mode .style-visibility-right label {
  color: #E5E5EA;
}

.dark-mode .chart-candles-select {
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.dark-mode .chart-candles-select:focus {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.dark-mode .custom-color-picker-simple .color-preview-simple {
  border: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dark-mode .custom-color-picker-simple:hover .color-preview-simple {
  border-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.dark-mode .indicator-settings-footer {
  border-top: 1px solid #2A2A2A;
}

.dark-mode .indicator-cancel-settings-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .indicator-cancel-settings-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #3A3A3A;
}

.dark-mode .indicator-reset-colors-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .indicator-reset-colors-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #3A3A3A;
}

.dark-mode .indicator-apply-settings-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .indicator-apply-settings-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #3A3A3A;
}

/* Symbol Categories - Dark Mode */
.dark-mode .symbol-categories {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dark-mode .category-btn {
  color: #8E8E93;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .category-btn:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.22);
}

.dark-mode .category-btn.active {
  color: #0B0E11;
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.dark-mode .category-btn.active:hover {
  background: #E5E5EA;
  border-color: #E5E5EA;
}

.dark-mode .symbol-list-item {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

.dark-mode .symbol-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode .symbol-list-item.unavailable {
  color: #8E8E93;
}

.dark-mode .symbol-item {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

.dark-mode .replay-exit-btn:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.trend-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  color: #1D1D1F;
  letter-spacing: 0px;
  cursor: grab;
  user-select: none;
  background: transparent;
}

.trend-table-header:active {
  cursor: grabbing;
}

.trend-table-close-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #8E8E93;
  font-size: 24px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}

.trend-table-close-btn:hover {
  background: transparent;
  color: #1D1D1F;
  transform: none;
  box-shadow: none;
}

.trend-table {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 14px;
}

.trend-table-row {
  display: grid;
  grid-template-columns: 60px 45px 65px 50px;
  gap: 6px;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  align-items: center;
  transition: all 0.2s ease;
  border-radius: 0;
  margin: 0;
  font-weight: 500;
}

.trend-table-row:hover {
  background: rgba(0, 0, 0, 0.02);
  transform: none;
  box-shadow: none;
}

.trend-table-header-row {
  display: grid;
  grid-template-columns: 60px 45px 65px 50px;
  gap: 6px;
  font-weight: 600;
  font-size: 7px;
  color: #48484A;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  padding: 4px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.1px;
  border-radius: 0;
  margin-bottom: 6px;
}

.trend-table-header-row:hover {
  background: transparent;
  transform: none;
}

.trend-table-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 4px;
  font-weight: 500;
  font-size: 11px;
  color: #1D1D1F;
  line-height: 1.4;
  white-space: nowrap;
}

.trend-table-header-row .trend-table-cell {
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  white-space: nowrap;
  gap: 3px;
  font-size: 7px;
}

.timeframe-cell {
  font-weight: 700;
  font-size: 14px;
  color: #1D1D1F;
  letter-spacing: 0px;
  font-family: var(--font-ui);
}

.trend-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.trend-icon.bullish {
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
  border: 1px solid rgba(52, 199, 89, 0.3);
  box-shadow: none;
}

.trend-icon.bearish {
  background: rgba(255, 59, 48, 0.15);
  color: #FF3B30;
  border: 1px solid rgba(255, 59, 48, 0.3);
  box-shadow: none;
}

.strength-text {
  font-size: 10px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.strength-text::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: block;
  animation: pulse 2s ease-in-out infinite;
}

.strength-text.low::before {
  background: #FF453A;
  box-shadow: none;
}

.strength-text.medium::before {
  background: #FF9F0A;
  box-shadow: none;
}

.strength-text.high::before {
  background: #30D158;
  box-shadow: none;
}

.strength-text.low {
  color: #FF3B30;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 69, 58, 0.2);
  box-shadow: none;
}

.strength-text.medium {
  color: #FF9500;
  background: rgba(255, 149, 0, 0.1);
  border: 1px solid rgba(255, 159, 10, 0.2);
  box-shadow: none;
}

.strength-text.high {
  color: #34C759;
  background: rgba(52, 199, 89, 0.1);
  border: 1px solid rgba(52, 199, 89, 0.2);
  box-shadow: none;
}

.ranging-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  border: 2px solid;
  transition: all 0.2s ease;
  position: relative;
}

.ranging-dot.trending {
  background: #34C759;
  border-color: rgba(52, 199, 89, 0.4);
  box-shadow: none;
}

.ranging-dot.ranging {
  background: #FF3B30;
  border-color: rgba(255, 59, 48, 0.4);
  box-shadow: none;
}

.overall-row {
  background: transparent;
  font-weight: 700;
  border: none;
  border-top: 2px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
  margin-top: 8px;
  padding-top: 12px;
  box-shadow: none;
  border-radius: 0;
}

.overall-row:hover {
  background: rgba(0, 0, 0, 0.02);
  transform: none;
  box-shadow: none;
}

.overall-badge,
.strength-badge,
.ranging-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
  border: 1px solid;
}

/* Overall Ratio Styling */
.overall-ratio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  letter-spacing: 0.2px;
  font-family: var(--font-ui);
  transition: all 0.2s ease;
}

.overall-ratio.bullish,
.overall-ratio.trending,
.overall-ratio.high {
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
  border-color: rgba(52, 199, 89, 0.3);
  box-shadow: none;
}

.overall-ratio.bearish,
.overall-ratio.ranging,
.overall-ratio.low {
  background: rgba(255, 59, 48, 0.15);
  color: #FF3B30;
  border-color: rgba(255, 59, 48, 0.3);
  box-shadow: none;
}

.overall-ratio.neutral {
  background: rgba(255, 204, 0, 0.15);
  color: #FFCC00;
  border-color: rgba(255, 204, 0, 0.3);
  box-shadow: none;
}

/* Dark Mode for Trend Table/Sparkline Card */
.dark-mode .sparkline-card {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e5e5e5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .sparkline-title {
  color: #ffffff;
}

.dark-mode .sparkline-column-headers,
.dark-mode .sparkline-row {
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .sparkline-column-header {
  color: rgba(255, 255, 255, 0.6);
}

.dark-mode .sparkline-cell-tf {
  color: rgba(255, 255, 255, 0.85);
}

.dark-mode .footer-stat {
  background: rgba(37, 37, 37, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .footer-label {
  color: rgba(255, 255, 255, 0.5);
}

.dark-mode .footer-value {
  color: #ffffff;
}

.dark-mode .sparkline-close-btn {
  color: rgba(255, 255, 255, 0.6);
}

.dark-mode .sparkline-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.dark-mode .live-text {
  color: #10b981;
}

.dark-mode .live-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.dark-mode .sparkline-card {
  --sparkline-up: #10b981;
  --sparkline-up-dark: #059669;
  --sparkline-up-bg: rgba(16, 185, 129, 0.15);
  --sparkline-down: #ef4444;
  --sparkline-down-dark: #dc2626;
  --sparkline-down-bg: rgba(239, 68, 68, 0.15);
  --sparkline-med: #f59e0b;
  --sparkline-med-dark: #d97706;
  --sparkline-text: #e5e5e5;
  --sparkline-text-muted: #9ca3af;
  --sparkline-text-faint: #6b7280;
  --sparkline-border: rgba(255, 255, 255, 0.1);
  --sparkline-border-soft: rgba(255, 255, 255, 0.08);
  --sparkline-surface: rgba(37, 37, 37, 0.5);
}

.trend-table-mini .trend-table-row {
  grid-template-columns: 38px 28px 42px 32px;
  gap: 3px;
  padding: 3px 0;
}

.trend-table-mini .trend-table-header-row {
  font-size: 6px;
  padding: 2px 0 4px;
  margin-bottom: 4px;
}

.trend-table-mini .trend-table-cell {
  font-size: 8px;
  gap: 2px;
}

.trend-table-mini .timeframe-cell {
  font-size: 7px;
}

.trend-table-mini .trend-icon {
  width: 11px;
  height: 11px;
  font-size: 7px;
  border-radius: 3px;
}

.trend-table-mini .trend-icon svg {
  width: 8px;
  height: 8px;
}

.trend-table-mini .strength-text {
  font-size: 6.5px;
  padding: 1px 4px;
  border-radius: 5px;
}

.trend-table-mini .strength-text::before {
  width: 2.5px;
  height: 2.5px;
}

.trend-table-mini .ranging-dot {
  width: 6px;
  height: 6px;
  border-width: 1.5px;
}

.trend-table-mini .overall-ratio {
  font-size: 7px;
  padding: 1px 4px;
  min-width: 20px;
  height: 12px;
}

.trend-table-mini .trend-table-close-btn,
.trend-table-mini .size-btn {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.trend-table-mini .trend-table-size-selector {
  padding: 2px;
  gap: 1px;
  border-radius: 5px;
}

.trend-table-mini .trend-table-header-actions {
  gap: 4px;
}

.trend-table-tiny {
  font-size: 9px;
  min-width: 240px;
}

.trend-table-tiny .trend-table-header {
  padding: 8px 12px;
  font-size: 10px;
}

.trend-table-tiny .trend-table {
  padding: 5px;
}

.trend-table-tiny .trend-table-row {
  grid-template-columns: 58px 44px 62px 48px;
  gap: 5px;
  padding: 6px 7px;
}

.trend-table-tiny .trend-table-header-row {
  font-size: 8px;
  padding: 7px 7px;
}

.trend-table-tiny .timeframe-cell {
  font-size: 8.5px;
}

.trend-table-tiny .trend-icon {
  width: 18px;
  height: 18px;
  font-size: 9px;
  border-radius: 6px;
}

.trend-table-tiny .strength-text {
  font-size: 8px;
  padding: 3px 6px;
  border-radius: 10px;
}

.trend-table-tiny .strength-text::before {
  width: 4.5px;
  height: 4.5px;
}

.trend-table-tiny .ranging-dot {
  width: 10px;
  height: 10px;
  border-width: 2px;
}

.trend-table-tiny .overall-ratio {
  font-size: 8.5px;
  padding: 3px 6px;
  min-width: 28px;
  height: 20px;
}

.trend-table-medium {
  /* Default size - no overrides needed */
}

.trend-table-big {
  font-size: 14px;
  min-width: 380px;
}

.trend-table-big .trend-table-header {
  padding: 14px 18px;
  font-size: 15px;
}

.trend-table-big .trend-table {
  padding: 10px;
}

.trend-table-big .trend-table-row {
  grid-template-columns: 95px 70px 100px 75px;
  gap: 10px;
  padding: 10px 8px;
}

.trend-table-big .trend-table-header-row {
  font-size: 13px;
  padding: 12px 8px;
}

.trend-table-big .timeframe-cell {
  font-size: 13px;
}

.trend-table-big .trend-icon {
  width: 24px;
  height: 24px;
  font-size: 14px;
}

.trend-table-big .strength-text {
  font-size: 13px;
  padding: 5px 10px;
}

.trend-table-big .strength-text::before {
  width: 7px;
  height: 7px;
}

.trend-table-big .ranging-dot {
  width: 12px;
  height: 12px;
  border-width: 2.5px;
}

.trend-table-big .overall-ratio {
  font-size: 13px;
  padding: 4px 9px;
}

.trend-table-big .trend-table-close-btn,
.trend-table-big .size-btn {
  width: 26px;
  height: 26px;
  font-size: 18px;
}

/* Size Selector */
.trend-table-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend-table-size-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 3px;
}

.size-btn {
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #86868B;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.size-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1D1D1F;
  transform: scale(1.05);
}

.size-btn.active {
  background: #1D1D1F;
  color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.dark-mode .trend-table-size-selector {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .size-btn {
  color: #98989D;
}

.dark-mode .size-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  transform: scale(1.05);
}

.dark-mode .size-btn.active {
  background: #FFFFFF;
  color: #1D1D1F;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px currentColor, 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 16px currentColor, 0 0 0 3px rgba(255, 255, 255, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  }
}

.dark-mode .symbol-ticker {
  color: #FFFFFF;
}

.dark-mode .symbol-fullname {
  color: #8E8E93;
}

.dark-mode .symbol-type {
  color: #8E8E93;
}

.dark-mode .symbol-source {
  color: #E5E5EA;
}

/* Profile Section - Dark Mode */
.dark-mode .profile-section-title {
  color: #8E8E93;
}

.dark-mode .profile-stat {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
}

.dark-mode .profile-stat-value {
  color: #FFFFFF;
}

.dark-mode .profile-stat-label {
  color: #8E8E93;
}

/* Drawer Overlay - Dark Mode */
.dark-mode .drawer-overlay {
  background: rgba(255, 255, 255, 0.2);
}

/* Chart Settings - Dark Mode */
.dark-mode .chart-settings-section-title {
  color: #8E8E93;
}

.dark-mode .chart-settings-label {
  color: #E5E5EA;
}

/* Replay Controls - Dark Mode */
.dark-mode .replay-controls {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
}

.dark-mode .replay-btn {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

/* ========================================
   NEW TREND TABLE STYLES
   ======================================== */
.new-trend-table {
  min-width: 380px;
  max-width: 450px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
              0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(142, 142, 147, 0.15);
  overflow: hidden;
  z-index: 9999;
  animation: trendTableFadeIn 0.3s ease-out;
}

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

.new-trend-table-header {
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
  color: white;
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  user-select: none;
}

.new-trend-table-header:active {
  cursor: grabbing;
}

.close-trend-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-trend-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.close-trend-btn:active {
  transform: scale(0.95);
}

.new-trend-table-body {
  padding: 8px;
  max-height: 500px;
  overflow-y: auto;
}

.new-trend-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
}

.new-trend-table thead th {
  background: rgba(142, 142, 147, 0.08);
  color: #1D1D1F;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(142, 142, 147, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.new-trend-table tbody tr {
  border-bottom: 1px solid rgba(142, 142, 147, 0.1);
  transition: background-color 0.2s ease;
}

.new-trend-table tbody tr:hover {
  background: rgba(0, 122, 255, 0.05);
}

.new-trend-table tbody td {
  padding: 10px 12px;
  font-size: 13px;
  color: #1D1D1F;
}

.new-trend-table tbody tr.overall-row {
  background: rgba(0, 122, 255, 0.08);
  font-weight: 600;
  border-top: 2px solid rgba(0, 122, 255, 0.3);
}

.new-trend-table tbody tr.overall-row:hover {
  background: rgba(0, 122, 255, 0.12);
}

.new-trend-table tbody tr.overall-row td {
  font-weight: 600;
}

/* Dark Mode Styles for New Trend Table */
.dark-mode .new-trend-table {
  background: rgba(28, 28, 30, 0.98);
  border: 1px solid rgba(84, 84, 88, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 
              0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .new-trend-table-header {
  background: linear-gradient(135deg, #0A84FF 0%, #0066CC 100%);
}

.dark-mode .new-trend-table thead th {
  background: rgba(84, 84, 88, 0.2);
  color: #F5F5F7;
  border-bottom: 1px solid rgba(84, 84, 88, 0.4);
}

.dark-mode .new-trend-table tbody tr {
  border-bottom: 1px solid rgba(84, 84, 88, 0.3);
}

.dark-mode .new-trend-table tbody tr:hover {
  background: rgba(10, 132, 255, 0.15);
}

.dark-mode .new-trend-table tbody td {
  color: #F5F5F7;
}

.dark-mode .new-trend-table tbody tr.overall-row {
  background: rgba(10, 132, 255, 0.2);
  border-top: 2px solid rgba(10, 132, 255, 0.4);
}

.dark-mode .new-trend-table tbody tr.overall-row:hover {
  background: rgba(10, 132, 255, 0.25);
}

/* Scrollbar Styling */
.new-trend-table-body::-webkit-scrollbar {
  width: 6px;
}

.new-trend-table-body::-webkit-scrollbar-track {
  background: rgba(142, 142, 147, 0.08);
  border-radius: 3px;
}

.new-trend-table-body::-webkit-scrollbar-thumb {
  background: rgba(142, 142, 147, 0.3);
  border-radius: 3px;
}

.new-trend-table-body::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 142, 147, 0.5);
}

.dark-mode .new-trend-table-body::-webkit-scrollbar-track {
  background: rgba(84, 84, 88, 0.2);
}

.dark-mode .new-trend-table-body::-webkit-scrollbar-thumb {
  background: rgba(84, 84, 88, 0.5);
}

.dark-mode .new-trend-table-body::-webkit-scrollbar-thumb:hover {
  background: rgba(84, 84, 88, 0.7);
}

.dark-mode .replay-exit-btn:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.dark-mode .indicators-btn {
  background: transparent;
  border-color: transparent;
  color: #F5F5F5;
}

.dark-mode .indicators-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Matches the modal's inputs/selects in dark mode. Needs the doubled class to outrank
   `.dark-mode .indicators-btn`, which clears the border for the bottom-strip buttons. */
.dark-mode .indicators-btn.indicator-backtest-btn {
  border-color: #2A2A2A;
}

.dark-mode .indicators-btn.indicator-backtest-btn:hover {
  border-color: #3A3A3A;
}

.dark-mode .indicators-btn.active-dashboard {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.dark-mode .indicators-btn.active-dashboard:hover {
  background: rgba(16, 185, 129, 0.3);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.6);
}

.dark-mode .indicators-btn.active-dashboard svg {
  stroke: #10B981;
}

.dark-mode .indicators-btn svg {
  stroke: #FFFFFF;
}

.dark-mode .indicators-btn::after {
  background: rgba(255, 255, 255, 0.15);
}

.dark-mode .indicators-text {
  color: #FFFFFF;
}

.dark-mode .indicators-count {
  background: rgba(102, 126, 234, 0.25);
  color: #A5B4FC;
}

.dark-mode .navbar-actions::before {
  background: rgba(255, 255, 255, 0.15);
}

.dark-mode .speed-btn {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .speed-btn:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.dark-mode .speed-selector-btn {
  background: rgba(142, 142, 147, 0.2);
  border: 1px solid rgba(142, 142, 147, 0.4);
  color: #F5F5F7;
}

.dark-mode .speed-selector-btn:hover {
  background: rgba(142, 142, 147, 0.3);
  border-color: rgba(142, 142, 147, 0.5);
  color: #FFFFFF;
}

.dark-mode .balance-input {
  background: rgba(30, 30, 32, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.dark-mode .balance-input:focus {
  border-color: #0A84FF;
  background: rgba(42, 42, 46, 1);
}

.dark-mode .balance-arrow {
  background: rgba(255, 255, 255, 0.08);
  color: #8E8E93;
}

.dark-mode .balance-arrow:hover {
  background: rgba(10, 132, 255, 0.2);
  color: #0A84FF;
}

.dark-mode .balance-arrow:active {
  background: rgba(10, 132, 255, 0.3);
}

/* Alert Badge - Dark Mode */
.dark-mode .alert-badge {
  background: #FF3B30;
  color: #FFFFFF;
}

/* Scrollbars - Dark Mode */
.dark-mode *::-webkit-scrollbar {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.dark-mode *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Text Colors - Dark Mode */
.dark-mode .profile-name {
  color: #FFFFFF;
}

.dark-mode .profile-email {
  color: #94A3B8;
}

.dark-mode .profile-avatar-section {
  background: transparent;
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .profile-avatar-large {
  border: none;
  box-shadow: none;
}

.dark-mode .profile-section {
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .profile-info-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2A2A2A;
}

.dark-mode .profile-info-label {
  color: #8E8E93;
}

.dark-mode .profile-info-value {
  color: #FFFFFF;
}

.dark-mode .profile-action-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .profile-action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark-mode .profile-action-btn svg {
  color: #E5E5EA;
}

.dark-mode .logout-btn {
  color: #FF3B30;
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.dark-mode .logout-btn:hover {
  background: rgba(255, 59, 48, 0.1);
}

/* ======================================== */
/*        CUSTOM COLOR PICKER MODAL        */
/* ======================================== */

.color-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.color-picker-modal {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 14px;
  width: 322px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.color-picker-modal.dark-mode {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-bottom: 14px;
  margin-left: -14px;
  margin-right: -14px;
  padding-left: 14px;
  padding-right: 14px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  border: none;
  position: relative;
}

.color-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.color-swatch:hover {
  transform: scale(1.15);
  z-index: 1;
}

.color-picker-opacity {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.opacity-label {
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.color-picker-modal.dark-mode .opacity-label {
  color: #999;
}

.opacity-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.opacity-slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.opacity-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.color-picker-modal.dark-mode .opacity-slider::-webkit-slider-thumb {
  border: 2px solid #2D2D2D;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.color-picker-modal.dark-mode .opacity-slider::-moz-range-thumb {
  border: 2px solid #2D2D2D;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.opacity-value {
  color: #000;
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 500;
  min-width: 42px;
  text-align: right;
  background: rgba(0, 0, 0, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
}

.color-picker-modal.dark-mode .opacity-value {
  color: #FFF;
  background: rgba(255, 255, 255, 0.08);
}

.color-picker-buttons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.color-picker-cancel,
.color-picker-apply {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

.color-picker-cancel {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}

.color-picker-cancel:hover {
  background: rgba(0, 0, 0, 0.08);
}

.color-picker-modal.dark-mode .color-picker-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #FFF;
}

.color-picker-modal.dark-mode .color-picker-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}

.color-picker-apply {
  background: #4CD964;
  color: #000;
}

.color-picker-apply:hover {
  background: #5EE374;
}

/* Chart Settings Modal - Dark Mode */
/* Speed Dropdown - Dark Mode */
.dark-mode .speed-dropdown-menu {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
}

.dark-mode .speed-dropdown-item {
  color: #fafafa;
}

.dark-mode .speed-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.dark-mode .speed-dropdown-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.dark-mode .speed-option {
  background: transparent;
  color: #FFFFFF;
}

.dark-mode .speed-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .speed-option.active {
  background: rgba(255, 255, 255, 0.15);
}

/* Logo Styling - Dark Mode */
/* Crypto logos are colored and should not be inverted */

/* Backtest Results - Dark Mode */
.dark-mode .backtest-card {
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid #2A2A2A;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark-mode .backtest-title {
  color: #E5E5EA;
}

.dark-mode .stat-row.highlight {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2A2A2A;
}

.dark-mode .stat-label {
  color: #8E8E93;
}

.dark-mode .stat-value,
.dark-mode .stat-value-large {
  color: #FFFFFF;
}

.dark-mode .apply-best-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #E5E5EA;
  border: 1px solid #2A2A2A;
}

.dark-mode .apply-best-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #3A3A3A;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .backtest-dashboard {
  background: rgba(28, 28, 30, 0.95);
}

/* ========================================
   TREND TABLE
   ======================================== */
/* ========================================
   SPARKLINE CARD (Trend Analysis Widget)
   ======================================== */

:root {
  --sparkline-up: #1fa463;
  --sparkline-up-dark: #128a4f;
  --sparkline-up-bg: #e8f6ee;
  --sparkline-down: #e34b4b;
  --sparkline-down-dark: #c23232;
  --sparkline-down-bg: #fdecec;
  --sparkline-med: #d99b1f;
  --sparkline-med-dark: #b5800a;
  --sparkline-text: #0f172a;
  --sparkline-text-muted: #6b7280;
  --sparkline-text-faint: #9aa3b2;
  --sparkline-border: #e8eaf0;
  --sparkline-border-soft: #eef0f4;
  --sparkline-surface: #fafbfc;
}

.sparkline-card {
  position: absolute;
  top: 100px;
  right: 10px;
  width: fit-content;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--sparkline-border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  padding: 22px 20px 20px;
  z-index: 50;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--sparkline-text);
  cursor: move;
  user-select: none;
}

/* Header */
.sparkline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
}

.sparkline-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--sparkline-text);
  pointer-events: none;
}

.sparkline-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 8px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sparkline-up);
  box-shadow: 0 0 0 3px #e8f6ee;
}

.live-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--sparkline-up-dark);
}

.sparkline-close-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--sparkline-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.sparkline-close-btn:hover {
  background: var(--sparkline-down-bg);
  color: var(--sparkline-down);
}

/* Column Headers */
.sparkline-column-headers {
  display: grid;
  grid-template-columns: 45px 85px 95px 55px;
  gap: 10px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--sparkline-border-soft);
  margin-bottom: 4px;
}

.sparkline-column-headers > div {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sparkline-text-faint);
}

.sparkline-column-headers > div:last-child {
  text-align: center;
}

/* Data Rows */
.sparkline-rows {
  display: flex;
  flex-direction: column;
}

.sparkline-row {
  display: grid;
  grid-template-columns: 45px 85px 95px 55px;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sparkline-border-soft);
  align-items: center;
}

.sparkline-row:last-child {
  border-bottom: none;
}

/* TF Cell */
.sparkline-cell-tf {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--sparkline-text);
}

/* Trend Pill */
.sparkline-cell-trend {
  display: flex;
  align-items: center;
}

.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.trend-pill.up {
  background: var(--sparkline-up-bg);
  color: var(--sparkline-up-dark);
}

.trend-pill.down {
  background: var(--sparkline-down-bg);
  color: var(--sparkline-down-dark);
}

.trend-pill svg {
  flex-shrink: 0;
}

/* Signal Sparkline */
.sparkline-cell-signal {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Strength Meter */
.sparkline-cell-strength {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}

.strength-bar-container {
  width: 45px;
  height: 5px;
  background: var(--sparkline-border-soft);
  border-radius: 3px;
  overflow: hidden;
}

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

.strength-bar-fill.high {
  width: 95%;
  background: var(--sparkline-up);
}

.strength-bar-fill.medium {
  width: 60%;
  background: var(--sparkline-med);
}

.strength-bar-fill.low {
  width: 30%;
  background: var(--sparkline-down);
}

.strength-label {
  font-size: 10px;
  color: var(--sparkline-text-muted);
  text-transform: capitalize;
  white-space: nowrap;
}

/* Range Dot */
.sparkline-cell-range {
  display: flex;
  justify-content: center;
  align-items: center;
}

.range-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.range-dot.ranging {
  background: var(--sparkline-down);
}

.range-dot.trending {
  background: var(--sparkline-up);
}

/* Footer Summary */
.sparkline-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.footer-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--sparkline-surface);
  border: 1px solid var(--sparkline-border-soft);
  border-radius: 10px;
}

.footer-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sparkline-text-faint);
}

.footer-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.value-up,
.value-trending {
  color: var(--sparkline-up);
}

.value-down,
.value-ranging {
  color: var(--sparkline-down);
}

.value-high {
  color: var(--sparkline-up);
}

.value-med {
  color: var(--sparkline-med);
}

.value-low {
  color: var(--sparkline-down);
}

.value-sep {
  color: var(--sparkline-text-faint);
  font-weight: 400;
}

/* Small Version Styles */
.sparkline-card-small {
  padding: 14px 16px 12px;
  font-size: 11px;
}

.sparkline-card-small .sparkline-title {
  font-size: 13px;
}

.sparkline-card-small .sparkline-column-headers {
  grid-template-columns: 35px 70px 75px 45px;
  gap: 8px;
  padding: 8px 0 6px;
  font-size: 9px;
}

.sparkline-card-small .sparkline-row {
  grid-template-columns: 35px 70px 75px 45px;
  gap: 8px;
  padding: 8px 0;
}

.sparkline-card-small .sparkline-cell-tf {
  font-size: 11px;
}

.sparkline-card-small .trend-pill {
  padding: 2px 7px;
  font-size: 10px;
}

.sparkline-card-small .trend-pill svg {
  width: 9px;
  height: 9px;
}

.sparkline-card-small .strength-bar-container {
  width: 35px;
  height: 4px;
}

.sparkline-card-small .strength-label {
  font-size: 9px;
}

.sparkline-card-small .range-dot {
  width: 6px;
  height: 6px;
}

.sparkline-card-small .sparkline-footer {
  gap: 8px;
  margin-top: 10px;
}

.sparkline-card-small .footer-stat {
  padding: 8px 10px;
  gap: 3px;
}

.sparkline-card-small .footer-label {
  font-size: 8px;
}

.sparkline-card-small .footer-value {
  font-size: 12px;
}

.sparkline-card-small .sparkline-live-indicator {
  font-size: 9px;
}

.sparkline-card-small .live-dot {
  width: 5px;
  height: 5px;
}

/* Tiny Version Styles - one step down again from small */
.sparkline-card-tiny {
  padding: 10px 12px 9px;
  font-size: 10px;
  border-radius: 12px;
}

.sparkline-card-tiny .sparkline-header {
  margin-bottom: 8px;
}

.sparkline-card-tiny .sparkline-title {
  font-size: 11px;
}

.sparkline-card-tiny .sparkline-live-indicator {
  font-size: 8px;
  gap: 4px;
  margin-right: 5px;
}

.sparkline-card-tiny .live-dot {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 0 2px #e8f6ee;
}

/* Needed because the rule above matches .dark-mode .live-dot's specificity but comes
   later in the file, so without this the tiny dot keeps the light-theme halo in dark
   mode. Same halo colour as dark mode's, just scaled to the smaller dot. */
.dark-mode .sparkline-card-tiny .live-dot {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.sparkline-card-tiny .live-text {
  font-size: 8px;
}

.sparkline-card-tiny .sparkline-close-btn {
  width: 16px;
  height: 16px;
  font-size: 15px;
  border-radius: 4px;
}

.sparkline-card-tiny .sparkline-column-headers {
  grid-template-columns: 28px 54px 60px 34px;
  gap: 6px;
  padding: 6px 0 4px;
}

.sparkline-card-tiny .sparkline-column-headers > div {
  font-size: 8px;
  letter-spacing: 0.08em;
}

.sparkline-card-tiny .sparkline-row {
  grid-template-columns: 28px 54px 60px 34px;
  gap: 6px;
  padding: 5px 0;
}

.sparkline-card-tiny .sparkline-cell-tf {
  font-size: 10px;
}

.sparkline-card-tiny .trend-pill {
  padding: 1px 5px;
  font-size: 9px;
  gap: 3px;
  border-radius: 4px;
}

/* Overrides the width/height attributes on the inline <svg> arrow */
.sparkline-card-tiny .trend-pill svg {
  width: 8px;
  height: 8px;
}

.sparkline-card-tiny .sparkline-cell-strength {
  gap: 4px;
}

.sparkline-card-tiny .strength-bar-container {
  width: 26px;
  height: 3px;
}

.sparkline-card-tiny .strength-label {
  font-size: 8px;
}

.sparkline-card-tiny .range-dot {
  width: 5px;
  height: 5px;
}

.sparkline-card-tiny .sparkline-footer {
  gap: 6px;
  margin-top: 8px;
}

.sparkline-card-tiny .footer-stat {
  padding: 5px 7px;
  gap: 2px;
  border-radius: 7px;
}

.sparkline-card-tiny .footer-label {
  font-size: 7px;
  letter-spacing: 0.06em;
}

.sparkline-card-tiny .footer-value {
  font-size: 11px;
  gap: 3px;
}

/* ========================================
   REPLAY PANEL (Draggable)
   ======================================== */
.replay-panel {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(142, 142, 147, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 10px 16px;
  min-width: 420px;
  z-index: 1000;
  user-select: none;
}

.replay-panel-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0 8px 0;
  cursor: move;
  color: #8E8E93;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.replay-panel-drag-handle:hover {
  opacity: 0.8;
}

/* Minimal Playback Controls */
.pb-controls {
  position: fixed;
  left: 50%;
  bottom: 35px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  z-index: 1000;
  user-select: none;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pb-btn {
  height: 28px;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background 120ms, color 120ms;
}

.pb-btn--wide {
  width: auto;
  padding: 0 10px;
}

.pb-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: #18181b;
}

.pb-btn:focus-visible {
  outline: 2px solid #a1a1aa;
  outline-offset: 2px;
}

.pb-btn:active:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
}

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

.pb-btn--danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.12);
  color: #dc2626;
}

.pb-btn--danger:active:not(:disabled) {
  background: rgba(248, 113, 113, 0.18);
  color: #dc2626;
}

.pb-btn svg {
  display: block;
}

.pb-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 6px;
}

.replay-speed-compact {
  position: relative;
  display: inline-flex;
}

/* Playback Controls - Dark Mode */
.pb-controls.dark-mode {
  border-color: #27272a;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pb-controls.dark-mode .pb-btn {
  color: #fafafa;
}

.pb-controls.dark-mode .pb-btn:hover:not(:disabled) {
  background: #1f1f22;
  color: #ffffff;
}

.pb-controls.dark-mode .pb-btn:active:not(:disabled) {
  background: #18181b;
  color: #ffffff;
}

.pb-controls.dark-mode .pb-btn:focus-visible {
  outline-color: #3f3f46;
}

.pb-controls.dark-mode .pb-btn--danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}

.pb-controls.dark-mode .pb-btn--danger:active:not(:disabled) {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

.pb-controls.dark-mode .pb-divider {
  background: #27272a;
}

/* Trade Buttons Panel - Bottom Left */
.trade-buttons-panel {
  position: absolute;
  top: 44px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 60;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 8px;
  box-shadow: none;
}

.trade-buttons-panel.dark-mode {
  background: transparent;
  border: none;
  box-shadow: none;
}

.trade-buttons-panel .order-btn {
  min-width: 50px;
  margin: 0;
  padding: 4px 10px;
  font-size: 10px;
  border-radius: 6px;
}

/* Quantity Selector */
.quantity-selector {
  position: relative;
  display: flex;
  align-items: center;
}

.quantity-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 50px;
  height: 28px;
  padding: 0 8px;
  background: rgba(142, 142, 147, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  color: #1D1D1F;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quantity-btn:hover {
  background: rgba(142, 142, 147, 0.18);
  border-color: rgba(0, 0, 0, 0.12);
}

.dark-mode .quantity-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.dark-mode .quantity-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}

.quantity-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  min-width: 80px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1001;
  /* Eighteen fixed sizes come to 772px of options, hung from a button roughly 140px down
     the chart. That fits a tall desktop window and nothing else: at 812px it ran 168px
     past the bottom edge, so the selected $10K sat half off the screen and everything
     below it was unreachable - the menu had no scroll of its own to get there. Capping
     against the viewport turns the overflow into a scroll. The cap only engages when the
     list would actually overrun, so a window tall enough to show all eighteen is
     unchanged. dvh repeats the value for mobile browsers, where the visible height
     shrinks as the address bar returns and vh would keep promising the taller figure. */
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  /* Without this, flicking past the end of the list scrolls the chart behind it. */
  overscroll-behavior: contain;
}

.quantity-menu.dark-mode {
  background: rgba(39, 39, 42, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.quantity-option {
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #1D1D1F;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.quantity-option:hover {
  background: rgba(142, 142, 147, 0.12);
}

.quantity-option.active {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.dark-mode .quantity-option {
  color: #F5F5F7;
}

.dark-mode .quantity-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dark-mode .quantity-option.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.quantity-option.custom-option {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 4px;
  padding-top: 10px;
  font-style: italic;
}

.dark-mode .quantity-option.custom-option {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Custom Amount Input */
.custom-input-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.custom-input-box {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 320px;
  animation: slideUp 0.2s ease;
}

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

.custom-input-overlay.dark-mode .custom-input-box {
  background: #1c1c1e;
  border-color: #3a3a3c;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.custom-amount-input {
  padding: 14px 16px;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  background: #f9f9f9;
  color: #1D1D1F;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  outline: none;
  transition: all 0.2s ease;
  text-align: center;
}

/* Remove number input arrows */
.custom-amount-input::-webkit-outer-spin-button,
.custom-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-amount-input[type=number] {
  -moz-appearance: textfield;
}

.custom-amount-input:focus {
  border-color: #007AFF;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

.custom-input-overlay.dark-mode .custom-amount-input {
  background: #2c2c2e;
  border-color: #3a3a3c;
  color: #F5F5F7;
}

.custom-input-overlay.dark-mode .custom-amount-input:focus {
  border-color: #007AFF;
  background: #1c1c1e;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

.custom-input-buttons {
  display: flex;
  gap: 10px;
}

.custom-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-btn.confirm {
  background: #007AFF;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.custom-btn.confirm:hover {
  background: #0066DD;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

.custom-btn.confirm:active {
  transform: translateY(0);
}

.custom-btn.cancel {
  background: #f0f0f0;
  color: #71717a;
}

.custom-btn.cancel:hover {
  background: #e5e5e5;
  color: #52525b;
}

.custom-input-overlay.dark-mode .custom-btn.cancel {
  background: #2c2c2e;
  color: #a1a1aa;
}

.custom-input-overlay.dark-mode .custom-btn.cancel:hover {
  background: #3a3a3c;
  color: #d4d4d8;
}

/* Pending Order Overlay */
.pending-order-overlay {
  position: absolute;
  right: 250px;
  z-index: 1000;
  pointer-events: all;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.pending-order-overlay.dark-mode {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.pending-order-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-ui);
}

.pending-order-overlay.dark-mode .pending-order-controls {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.po-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
  border: 1.5px dashed rgba(113, 113, 122, 0.4);
  border-radius: 4px;
  background: #fff;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.po-btn-pnl {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.pending-order-overlay.dark-mode .po-btn {
  background: #000;
  border-color: rgba(113, 113, 122, 0.4);
  color: #a1a1aa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.po-btn:hover {
  background: #fff;
  color: #e4e4e7;
  border-color: rgba(161, 161, 170, 0.6);
}

.pending-order-overlay.dark-mode .po-btn:hover {
  background: #000;
  color: #e4e4e7;
  border-color: rgba(161, 161, 170, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.po-btn.tp-btn {
  border-color: rgba(20, 184, 166, 0.4);
  color: #14b8a6;
}

.po-btn.tp-btn:hover {
  border-color: #14b8a6;
  background: #fff;
}

.po-btn.tp-btn.active {
  background: #fff;
  color: #14b8a6;
  border: 1.5px solid #14b8a6;
  border-style: solid;
}

.po-btn.sl-btn {
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.po-btn.sl-btn:hover {
  border-color: #f59e0b;
  background: #fff;
}

.po-btn.sl-btn.active {
  background: #fff;
  color: #f59e0b;
  border: 1.5px solid #f59e0b;
  border-style: solid;
}

.pending-order-overlay.dark-mode .po-btn.tp-btn {
  border-color: rgba(20, 184, 166, 0.4);
  color: #14b8a6;
}

.pending-order-overlay.dark-mode .po-btn.tp-btn:hover {
  border-color: #14b8a6;
  background: #000;
}

.pending-order-overlay.dark-mode .po-btn.tp-btn.active {
  background: #000;
  color: #14b8a6;
  border: 1.5px solid #14b8a6;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.pending-order-overlay.dark-mode .po-btn.sl-btn {
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.pending-order-overlay.dark-mode .po-btn.sl-btn:hover {
  border-color: #f59e0b;
  background: #000;
}

.pending-order-overlay.dark-mode .po-btn.sl-btn.active {
  background: #000;
  color: #f59e0b;
  border: 1.5px solid #f59e0b;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.po-btn.po-confirm {
  background: #007AFF;
  color: white;
  border: 1.5px solid #007AFF;
  border-style: solid;
  font-size: 11px;
  font-weight: 600;
  height: 28px;
  padding: 0 12px;
}

.po-btn.po-confirm:hover {
  background: #0056CC;
  border-color: #0056CC;
  color: white;
}

.pending-order-overlay.dark-mode .po-btn.po-confirm {
  background: #007AFF;
  color: white;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.pending-order-overlay.dark-mode .po-btn.po-confirm:hover {
  background: #0056CC;
  color: white;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.po-btn.po-close {
  background: transparent;
  color: #71717a;
  border: none;
  font-size: 16px;
  height: 28px;
  padding: 0 6px;
  min-width: auto;
}

.po-pnl .po-btn.po-close {
  padding: 0;
  padding-left: 8px;
  margin-left: 8px;
  width: 18px;
  height: 18px;
  color: inherit;
  border-left: 1px solid currentColor;
  border-radius: 0;
}

.pending-order-overlay.dark-mode .po-btn.po-close {
  color: #71717a;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.po-btn.po-close:hover {
  background: transparent;
  color: #EF4444;
  transform: scale(1.1);
}

.pending-order-overlay.dark-mode .po-btn.po-close:hover {
  background: transparent;
  color: #EF4444;
  transform: scale(1.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.po-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: #a1a1aa;
  background: transparent;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.pending-order-overlay.dark-mode .po-balance {
  color: #a1a1aa;
  background: transparent;
}

.po-pnl {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  gap: 4px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid;
  box-shadow: none;
}

.po-pnl.profit {
  color: #22C55E;
  background: #fff;
  border-color: #22C55E;
}

.po-pnl.loss {
  color: #EF4444;
  background: #fff;
  border-color: #EF4444;
}

.pending-order-overlay.dark-mode .po-pnl {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.pending-order-overlay.dark-mode .po-pnl.profit {
  background: #000 !important;
  border: 1px solid #22C55E;
  color: #22C55E;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.pending-order-overlay.dark-mode .po-pnl.loss {
  background: #000 !important;
  border: 1px solid #EF4444;
  color: #EF4444;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.po-pnl-percent {
  font-size: 11px;
  font-weight: 600;
  opacity: 1;
}

.po-size-input {
  display: flex;
  align-items: center;
  gap: 0;
  height: 28px;
  padding: 0;
  background: transparent;
  border-radius: 4px;
}

.pending-order-overlay.dark-mode .po-size-input {
  background: transparent;
}

.po-size-input input {
  width: 30px;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  border: 1.5px solid rgba(113, 113, 122, 0.4);
  border-radius: 4px;
  background: transparent;
  color: #e4e4e7;
  outline: none;
  transition: all 0.15s ease;
  text-align: center;
}

.pending-order-overlay.dark-mode .po-size-input input {
  background: transparent;
  color: #e4e4e7;
  border-color: rgba(113, 113, 122, 0.4);
}

.po-size-input input:focus {
  border-color: #60A5FA;
  border-style: solid;
}

.po-size-input input:hover {
  border-color: rgba(161, 161, 170, 0.6);
}

.po-size-label {
  font-size: 11px;
  font-weight: 600;
  color: #a1a1aa;
  white-space: nowrap;
  margin-left: 2px;
}

.pending-order-overlay.dark-mode .po-size-label {
  color: #a1a1aa;
}

/* ========================================
   TP/SL FLOATING BOXES
   ======================================== */
.tp-sl-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: ns-resize;
  user-select: none;
  pointer-events: all;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: all 0.15s ease;
  position: relative;
}

.tp-box {
  background: #fff;
  border: 1.5px solid #14b8a6;
  color: #14b8a6;
}

.tp-box:hover {
  background: #fff;
  border-color: #0d9488;
}

.sl-box {
  background: #fff;
  border: 1.5px solid #f59e0b;
  color: #f59e0b;
}

.sl-box:hover {
  background: #fff;
  border-color: #d97706;
}

.tp-sl-label {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.tp-sl-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tp-sl-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  padding-left: 8px;
  margin-left: 8px;
  background: transparent;
  border: none;
  border-left: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.tp-sl-close:hover {
  background: transparent;
  transform: scale(1.1);
  color: #EF4444;
}

.tp-sl-close:active {
  transform: scale(0.95);
}

/* Dark Mode TP/SL Boxes */
.dark-mode .tp-box {
  background: #000;
  border: 1.5px solid #14b8a6;
  color: #14b8a6;
}

.dark-mode .tp-box:hover {
  background: #000;
  border-color: #0d9488;
}

.dark-mode .sl-box {
  background: #000;
  border: 1.5px solid #f59e0b;
  color: #f59e0b;
}

.dark-mode .sl-box:hover {
  background: #000;
  border-color: #d97706;
}

/* Trading Info Row */
.replay-panel-trading-info {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
}

.trading-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trading-info-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.trading-info-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #1D1D1F;
}

.trading-info-value.profit {
  color: #28A745;
}

.trading-info-value.loss {
  color: #EF4444;
}

/* SL/TP Controls */
.sl-tp-controls {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
}

.sl-tp-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sl-tp-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: #8E8E93;
  white-space: nowrap;
}

.sl-tp-input {
  flex: 1;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #1D1D1F;
  outline: none;
  transition: all 0.15s ease;
}

.sl-tp-input:focus {
  background: white;
  border-color: #007AFF;
}

/* Order Buttons */
.replay-panel-order-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.order-btn {
  flex: 1;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.order-btn.buy-btn {
  background: linear-gradient(135deg, #28A745 0%, #20C997 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.order-btn.buy-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

.order-btn.sell-btn {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.order-btn.sell-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.order-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* Replay Controls in Panel */
.replay-panel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
}

.replay-panel-btn {
  padding: 6px 10px;
  min-height: 30px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  color: #1D1D1F;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.replay-panel-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
}

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

.replay-panel-btn.replay-play-btn {
  font-size: 12px;
  min-width: 36px;
}

.replay-panel-exit-btn {
  padding: 6px 10px;
  min-height: 30px;
  background: rgba(239, 68, 68, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #EF4444;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.replay-panel-exit-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.replay-panel-expand-btn {
  padding: 6px 8px;
  min-height: 30px;
  background: rgba(0, 122, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: 6px;
  color: #007AFF;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.replay-panel-expand-btn:hover {
  background: rgba(0, 122, 255, 0.15);
  border-color: rgba(0, 122, 255, 0.3);
}

/* Collapsible Trading Section */
.replay-panel-trading-section {
  animation: slideDown 0.2s ease-out;
  overflow: hidden;
  margin-top: 8px;
}

.replay-panel-trading-section .replay-panel-trading-info {
  margin-bottom: 8px;
}

.replay-panel-trading-section .replay-panel-order-buttons {
  margin-bottom: 0;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* Balance Selector */
.replay-panel-balance-selector {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
}

.balance-selector-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

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

.balance-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.balance-input {
  flex: 1;
  padding: 6px 32px 6px 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #1D1D1F;
  outline: none;
  transition: all 0.15s ease;
}

.balance-input:focus {
  border-color: #007AFF;
  background: white;
}

.balance-input::-webkit-inner-spin-button,
.balance-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.balance-arrows {
  position: absolute;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.balance-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 14px;
  background: rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: 4px;
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.balance-arrow:hover {
  background: rgba(0, 122, 255, 0.1);
  color: #007AFF;
}

.balance-arrow:active {
  background: rgba(0, 122, 255, 0.15);
  transform: scale(0.95);
}

.balance-reset-btn {
  padding: 6px 12px;
  background: rgba(0, 122, 255, 0.1);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: 6px;
  color: #007AFF;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.balance-reset-btn:hover {
  background: rgba(0, 122, 255, 0.15);
  border-color: rgba(0, 122, 255, 0.3);
}

/* Open Orders List */
.replay-panel-orders {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  max-height: 150px;
  overflow-y: auto;
}

.orders-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: white;
  border-radius: 6px;
  margin-bottom: 6px;
  border-left: 2px solid;
}

.order-item.buy {
  border-left-color: #28A745;
}

.order-item.sell {
  border-left-color: #EF4444;
}

.order-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

.order-type {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  min-width: 35px;
}

.order-item.buy .order-type {
  color: #28A745;
}

.order-item.sell .order-type {
  color: #EF4444;
}

.order-price {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #1D1D1F;
}

.order-pnl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.order-pnl.profit {
  color: #28A745;
}

.order-pnl.loss {
  color: #EF4444;
}

.close-order-btn {
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 4px;
  color: #EF4444;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.close-order-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.close-all-btn {
  padding: 3px 8px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 4px;
  color: #EF4444;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.close-all-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
}

/* Dark Mode Styles for Replay Panel */
.replay-panel.dark-mode {
  background: rgba(28, 28, 30, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
}

.replay-panel.dark-mode .replay-panel-trading-info,
.replay-panel.dark-mode .replay-panel-controls,
.replay-panel.dark-mode .replay-panel-orders,
.replay-panel.dark-mode .replay-panel-trading-section,
.replay-panel.dark-mode .replay-panel-balance-selector,
.replay-panel.dark-mode .sl-tp-controls {
  background: rgba(255, 255, 255, 0.05);
}

.replay-panel.dark-mode .trading-info-value {
  color: #F5F5F7;
}

.replay-panel.dark-mode .replay-panel-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.replay-panel.dark-mode .replay-panel-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.replay-panel.dark-mode .order-item {
  background: rgba(255, 255, 255, 0.06);
}

.replay-panel.dark-mode .order-price {
  color: #F5F5F7;
}

.replay-panel.dark-mode .balance-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.replay-panel.dark-mode .balance-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #007AFF;
}

.replay-panel.dark-mode .sl-tp-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.replay-panel.dark-mode .sl-tp-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #007AFF;
}
}

/* ===== ORDER PANEL STYLES ===== */
/* Order Panel (Top Center - Trading Controls) */
.order-panel {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(142, 142, 147, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 10px 16px;
  min-width: 420px;
  max-width: 500px;
  z-index: 1001;
  user-select: none;
}

.order-panel-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0 8px 0;
  cursor: move;
  color: #8E8E93;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.order-panel-drag-handle:hover {
  opacity: 0.8;
}

.order-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: #1D1D1F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.order-panel-toggle-btn {
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: 4px;
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-panel-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1D1D1F;
}

.order-panel-trading-section {
  display: flex;
  flex-direction: column;
}

.order-panel-balance-selector {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
}

.order-panel-trading-info {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
}

.order-panel-order-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.order-panel-orders {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-top: 8px;
}

/* Dark Mode Styles for Order Panel */
.order-panel.dark-mode {
  background: rgba(28, 28, 30, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
}

.order-panel.dark-mode .order-panel-header {
  color: #F5F5F7;
}

.order-panel.dark-mode .order-panel-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #8E8E93;
}

.order-panel.dark-mode .order-panel-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.order-panel.dark-mode .order-panel-trading-info,
.order-panel.dark-mode .order-panel-trading-section,
.order-panel.dark-mode .order-panel-balance-selector,
.order-panel.dark-mode .order-panel-orders {
  background: rgba(255, 255, 255, 0.05);
}

.order-panel.dark-mode .trading-info-value {
  color: #F5F5F7;
}

.order-panel.dark-mode .order-item {
  background: rgba(255, 255, 255, 0.06);
}

.order-panel.dark-mode .order-price {
  color: #F5F5F7;
}

.order-panel.dark-mode .balance-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.order-panel.dark-mode .balance-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #007AFF;
}

.order-panel.dark-mode .sl-tp-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.order-panel.dark-mode .sl-tp-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #007AFF;
}

.trend-table-container.small .trend-separator {
  font-size: 7px;
}

/* Dark Mode */
.trend-table-container.dark-mode {
  background: rgba(28, 28, 30, 0.95);
}

.trend-table-container.dark-mode .trend-table-title {
  color: #E5E5EA;
  border-bottom: 1px solid rgba(58, 58, 60, 0.5);
}

.trend-table-container.dark-mode .trend-header-cell {
  color: #8E8E93;
}

.trend-table-container.dark-mode .close-btn {
  color: #8E8E93;
}

.trend-table-container.dark-mode .close-btn:hover {
  background: rgba(255, 69, 58, 0.15);
  color: #FF453A;
}

.trend-table-container.dark-mode .trend-table-row {
  background: rgba(58, 58, 60, 0.5);
}

.trend-table-container.dark-mode .trend-table-row:hover {
  background: rgba(58, 58, 60, 0.7);
}

.trend-table-container.dark-mode .trend-table-row.overall-row {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.trend-table-container.dark-mode .trend-table-row.overall-row:hover {
  background: rgba(16, 185, 129, 0.25);
}

.trend-table-container.dark-mode .trend-table-cell {
  color: #E5E5EA;
}

.trend-table-container.dark-mode .strength-text {
  color: #E5E5EA;
}

.trend-table-container.dark-mode .strength-text.mid {
  color: #FF9F0A;
}

/* ========================================
   CHART SCALE LABELS - DARK MODE
   ======================================== */
/* Ensure timescale and price scale text is fully white with no shadow in dark mode */
.dark-mode div[class*="tv-lightweight-charts"] table tr td,
.dark-mode .tv-lightweight-charts table tr td,
.dark-mode div[class*="tv-lightweight-charts"] div,
.dark-mode .tv-lightweight-charts div {
  color: #FFFFFF !important;
  text-shadow: none !important;
}

/* Target all possible scale label elements */
.dark-mode [class*="tv-lightweight-charts"] td[style*="color"],
.dark-mode [class*="tv-lightweight-charts"] div[style*="color"] {
  color: #FFFFFF !important;
}

/* ========================================
   TRADE CHECKER BUTTON
   ======================================== */
.trade-checker-btn {
  position: absolute;
  top: 3px;
  right: 74px;
  z-index: 90;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1D1D1F;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.trade-checker-btn:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.trade-checker-btn svg {
  color: #10b981;
}

.dark-mode .trade-checker-btn {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.dark-mode .trade-checker-btn:hover {
  background: rgba(40, 40, 40, 1);
}

/* ========================================
   TRADE CHECKER MODAL
   ======================================== */
.trade-checker-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.trade-checker-modal {
  background: #FFFFFF;
  border-radius: 16px;
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.trade-checker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.trade-checker-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
}

.trade-checker-header .close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #86868B;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.trade-checker-header .close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1D1D1F;
}

.trade-checker-score {
  padding: 32px 24px;
  text-align: center;
}

.score-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 8px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.score-percentage {
  font-size: 36px;
  font-weight: 700;
  color: #1D1D1F;
}

.score-rating {
  font-size: 14px;
  font-weight: 600;
  color: #86868B;
  margin-top: 4px;
}

.score-details {
  margin-top: 12px;
}

.score-fraction {
  font-size: 14px;
  color: #86868B;
}

.trade-checker-breakdown {
  padding: 0 24px 24px;
}

.trade-checker-breakdown h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakdown-item {
  font-size: 13px;
  color: #1D1D1F;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}

.trade-checker-footer {
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.trade-checker-footer p {
  margin: 0;
  font-size: 13px;
  color: #1D1D1F;
  line-height: 1.5;
}

.trade-checker-disclaimer {
  background: rgba(255, 193, 7, 0.08);
  border-top: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 0 0 16px 16px;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.disclaimer-header:hover {
  background: rgba(255, 193, 7, 0.12);
}

.disclaimer-title {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.disclaimer-title strong {
  color: #1D1D1F;
  font-weight: 600;
}

.disclaimer-header svg {
  color: #666;
  flex-shrink: 0;
}

.disclaimer-content {
  padding: 0 24px 16px 24px;
}

.disclaimer-content p {
  margin: 0;
  font-size: 11px;
  color: #666;
  line-height: 1.6;
}

/* Dark mode */
.dark-mode .trade-checker-modal {
  background: #1E1E1E;
}

.dark-mode .trade-checker-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .trade-checker-header h3,
.dark-mode .score-percentage,
.dark-mode .trade-checker-breakdown h4,
.dark-mode .breakdown-item,
.dark-mode .trade-checker-footer p {
  color: #FFFFFF;
}

.dark-mode .trade-checker-header .close-btn {
  color: #86868B;
}

.dark-mode .trade-checker-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.dark-mode .breakdown-item {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode .trade-checker-footer {
  background: rgba(255, 255, 255, 0.03);
  border-top-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .trade-checker-disclaimer {
  background: rgba(255, 193, 7, 0.12);
  border-top-color: rgba(255, 193, 7, 0.3);
}

.dark-mode .disclaimer-header:hover {
  background: rgba(255, 193, 7, 0.18);
}

.dark-mode .disclaimer-title {
  color: #AAA;
}

.dark-mode .disclaimer-title strong {
  color: #FFF;
}

.dark-mode .disclaimer-header svg {
  color: #AAA;
}

.dark-mode .disclaimer-content p {
  color: #AAA;
}

.trend-table-container.dark-mode .trend-separator {
  color: #8E8E93;
  border: 1px solid #2A2A2A;
}

.dark-mode .backtest-dashboard-header {
  border-bottom: 1px solid rgba(58, 58, 60, 0.5);
}

.dark-mode .backtest-dashboard-params {
  border-top: 1px solid rgba(58, 58, 60, 0.5);
}

.dark-mode .backtest-dashboard-title {
  color: #E5E5EA;
}

.dark-mode .backtest-dashboard-subtitle,
.dark-mode .backtest-dashboard-label,
.dark-mode .backtest-stat-label,
.dark-mode .backtest-param-label {
  color: #8E8E93;
}

.dark-mode .backtest-stat-item {
  background: rgba(58, 58, 60, 0.5);
}

.dark-mode .backtest-param-value {
  color: #E5E5EA;
}

.dark-mode .backtest-stat-item.highlight {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.dark-mode .backtest-stat-value,
.dark-mode .backtest-param-value {
  color: #FFFFFF;
}

.dark-mode .backtest-stat-value-large {
  color: #10B981;
}

.dark-mode .indicator-backtest-results {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2A2A2A;
}

.dark-mode .backtest-results-header {
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .backtest-results-title {
  color: #E5E5EA;
}

.dark-mode .backtest-result-item {
  background: rgba(58, 58, 60, 0.5);
}

.dark-mode .backtest-result-item.best {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.dark-mode .backtest-result-label {
  color: #8E8E93;
}

.dark-mode .backtest-result-value {
  color: #FFFFFF;
}

.dark-mode .backtest-result-value.highlight {
  color: #10B981;
}

.dark-mode .apply-backtest-btn {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.dark-mode .apply-backtest-btn:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.4);
}

.dark-mode .backtest-overlay {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .backtest-close-btn {
  color: #E5E5EA;
}

.dark-mode .backtest-close-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

/* Watchlist - Dark Mode */
.dark-mode .watchlist-drawer {
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid #2A2A2A;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Position size calculator - dark mode */
.dark-mode .position-calc-drawer {
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid #2A2A2A;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark-mode .position-calc-drawer .drawer-header {
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .calc-field-grid {
  border-bottom-color: #2A2A2A;
}

.dark-mode .calc-field-label {
  color: #E5E5EA;
}

.dark-mode .calc-input {
  background: #0A0A0A;
  border-color: #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .calc-input:focus {
  border-color: #3A3A3A;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.dark-mode .calc-result {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .calc-result-label {
  color: #A1A1A6;
}

.dark-mode .calc-result-value,
.dark-mode .calc-row-value {
  color: #FFFFFF;
}

.dark-mode .calc-row {
  color: #A1A1A6;
}

.dark-mode .calc-direction.long {
  background: rgba(52, 199, 89, 0.18);
  color: #4ADE80;
}

.dark-mode .calc-direction.short {
  background: rgba(255, 59, 48, 0.18);
  color: #FF7A70;
}

.dark-mode .calc-risk {
  color: #FF7A70;
}

.dark-mode .calc-reward {
  color: #4ADE80;
}

.dark-mode .calc-note {
  background: rgba(255, 149, 0, 0.12);
  border-color: rgba(255, 149, 0, 0.28);
  color: #F0A94B;
}

.dark-mode .calc-empty {
  color: #6E6E73;
}

.dark-mode .calc-error {
  color: #FF7A70;
}

.dark-mode .watchlist-drawer .drawer-header {
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .watchlist-create-section {
  border-bottom: 1px solid #2A2A2A;
}

.dark-mode .watchlist-name-input,
.dark-mode .symbol-input {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .watchlist-name-input:focus,
.dark-mode .symbol-input:focus {
  border-color: #3A3A3A;
  background: #0F0F0F;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.dark-mode .watchlist-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2A2A2A;
}

.dark-mode .watchlist-header h4 {
  color: #FFFFFF;
}

.dark-mode .watchlist-action-btn {
  background: transparent;
  border: 1px solid #2A2A2A;
  color: #E5E5EA;
}

.dark-mode .watchlist-action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #3A3A3A;
}

.dark-mode .watchlist-action-btn.delete:hover {
  background: rgba(255, 59, 48, 0.15);
  border-color: #FF3B30;
  color: #FF6B6B;
}

.dark-mode .symbol-btn-watchlist {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2A2A2A;
  color: #FFFFFF;
}

.dark-mode .symbol-btn-watchlist:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #3A3A3A;
  color: #E5E5EA;
}

.dark-mode .remove-symbol-btn {
  background: transparent;
  border: 1px solid #2A2A2A;
  color: #E5E5EA;
}

.dark-mode .remove-symbol-btn:hover {
  background: rgba(255, 59, 48, 0.15);
  border-color: #FF3B30;
  color: #FF6B6B;
}

.dark-mode .empty-watchlist,
.dark-mode .no-watchlists {
  color: #8E8E93;
}

/* Timeframe Dropdown - Dark Mode */
.dark-mode .timeframe-dropdown-item {
  color: #E5E5EA;
}

.dark-mode .timeframe-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.dark-mode .timeframe-dropdown-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.dark-mode .timeframe-group-header {
  color: #8E8E93;
}

/* ========================================
   FIBONACCI LEVELS MODAL
   ======================================== */
.fib-levels-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fib-levels-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

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

.fib-levels-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fib-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: rgba(142, 142, 147, 0.08);
  border-radius: 8px;
  transition: background 0.2s;
}

.fib-level-row:hover {
  background: rgba(142, 142, 147, 0.12);
}

.fib-level-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #007AFF;
}

.fib-level-input {
  flex: 1;
  padding: 6px 10px;
  background: rgba(142, 142, 147, 0.08);
  border: 1px solid rgba(142, 142, 147, 0.12);
  border-radius: 6px;
  font-size: 13px;
  color: #1D1D1F;
  font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
  text-align: center;
}

.fib-color-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid rgba(142, 142, 147, 0.2);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.fib-color-btn:hover {
  transform: scale(1.1);
  border-color: rgba(142, 142, 147, 0.4);
}

.fib-levels-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid rgba(142, 142, 147, 0.12);
  background: rgba(255, 255, 255, 0.5);
}

.fib-btn-secondary {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(142, 142, 147, 0.2);
  border-radius: 8px;
  color: #1D1D1F;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.fib-btn-secondary:hover {
  background: rgba(142, 142, 147, 0.08);
  border-color: rgba(142, 142, 147, 0.3);
}

.fib-btn-primary {
  padding: 8px 20px;
  background: #007AFF;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.fib-btn-primary:hover {
  background: #0051D5;
}

/* Dark Mode */
.dark-mode .fib-levels-modal {
  background: rgba(28, 28, 30, 0.98);
}

.dark-mode .fib-level-row {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode .fib-level-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dark-mode .fib-level-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #E5E5EA;
}

.dark-mode .fib-color-btn {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .fib-color-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.dark-mode .fib-levels-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
  background: rgba(28, 28, 30, 0.5);
}

.dark-mode .fib-btn-secondary {
  border-color: rgba(255, 255, 255, 0.2);
  color: #E5E5EA;
}

.dark-mode .fib-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ========================================
   FIBONACCI CUSTOMIZE BUTTON IN DROPDOWN
   ======================================== */
.fib-customize-btn {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: rgba(142, 142, 147, 0.08);
  border: 1px solid rgba(142, 142, 147, 0.12);
  border-radius: 6px;
  color: #1D1D1F;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.fib-customize-btn:hover {
  background: rgba(142, 142, 147, 0.12);
  border-color: rgba(142, 142, 147, 0.2);
}

.fib-customize-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* Dark Mode */
.dark-mode .fib-customize-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #E5E5EA;
}

.dark-mode .fib-customize-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ========================================
   POSITION COLOR DROPDOWN
   ======================================== */
.position-color-dropdown {
  min-width: 280px !important;
  max-width: 320px !important;
}

.position-color-section {
  margin-bottom: 16px;
}

.position-color-section:last-child {
  margin-bottom: 0;
}

.position-color-label {
  font-size: 12px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 8px;
  padding: 0 4px;
}

.dark-mode .position-color-label {
  color: #E5E5EA;
}
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(52, 211, 153, 0.4);
  backdrop-filter: blur(10px);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.swift-algo-trend-table-container.size-big {
  width: 240px;
  height: 240px;
  padding: 8px;
}

.swift-algo-trend-table-container.size-small {
  width: 200px;
  height: 200px;
  padding: 6px;
}

.swift-algo-trend-table-header {
  padding: 6px;
  background: rgba(31, 41, 55, 0.8);
  border-bottom: 1px solid rgba(52, 211, 153, 0.3);
  font-weight: 700;
  font-size: 9px;
  color: #34D399;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

/* New Grid Layout */
.swift-algo-trend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  flex: 1;
  padding: 4px;
}

.trend-grid-cell {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: all 0.2s ease;
  min-height: 0;
}

.trend-grid-cell:hover {
  background: rgba(31, 41, 55, 0.8);
  border-color: rgba(52, 211, 153, 0.4);
  transform: scale(1.05);
}

.trend-grid-cell.overall-cell {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.4);
  font-weight: 700;
  grid-column: 2;
}

.cell-timeframe {
  font-size: 10px;
  font-weight: 700;
  color: #34D399;
  margin-bottom: 4px;
  text-align: center;
  white-space: nowrap;
}

.cell-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cell-trend {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.cell-trend.bullish {
  color: #10B981;
}

.cell-trend.bearish {
  color: #EF4444;
}

.cell-strength {
  font-size: 10px;
  line-height: 1;
}

.cell-strength.strength-high {
  color: #10B981;
}

.cell-strength.strength-medium {
  color: #F59E0B;
}

.cell-strength.strength-low {
  color: #EF4444;
}

.cell-status {
  font-size: 10px;
  line-height: 1;
}

.cell-status.trending {
  color: #10B981;
}

.cell-status.ranging {
  color: #EF4444;
}

.swift-algo-trend-table-container .swift-trend-grid-row:last-child {
  border-bottom: none;
}

.swift-algo-trend-table-container .swift-trend-grid-cell {
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.swift-algo-trend-table-container .swift-trend-grid-cell.timeframe-cell {
  font-weight: 700;
  color: #000000;
  font-size: 9px;
  justify-content: flex-start;
  min-width: 30px;
  flex-shrink: 0;
}

.swift-algo-trend-table-container .swift-trend-grid-cell.trend-cell,
.swift-algo-trend-table-container .swift-trend-grid-cell.strength-cell,
.swift-algo-trend-table-container .swift-trend-grid-cell.status-cell {
  flex: 1;
  min-width: 0;
}

/* Trend Icon (Checkmark/X) */
.trend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.trend-icon.bullish {
  color: #10B981;
}

.trend-icon.bearish {
  color: #EF4444;
}

/* Strength Indicator (Dot + Text) */
.strength-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 7px;
  font-weight: 600;
}

.strength-dot {
  font-size: 8px;
  line-height: 1;
}

.strength-text {
  font-size: 7px;
  display: none;
}

.strength-indicator.strength-high .strength-dot {
  color: #10B981;
}

.strength-indicator.strength-high .strength-text {
  color: #10B981;
}

.strength-indicator.strength-medium .strength-dot {
  color: #F59E0B;
}

.strength-indicator.strength-medium .strength-text {
  color: #F59E0B;
}

.strength-indicator.strength-low .strength-dot {
  color: #EF4444;
}

.strength-indicator.strength-low .strength-text {
  color: #EF4444;
}

/* Status Indicator (Just Dot) */
.status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
}

.status-indicator.trending {
  color: #10B981;
}

.status-indicator.ranging {
  color: #EF4444;
}

/* Overall Row */
.swift-trend-grid-row.overall-row {
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  font-weight: 700;
  padding: 4px;
}

.swift-trend-grid-row.overall-row .timeframe-cell {
  color: #000000;
  font-weight: 800;
}

.trend-summary,
.strength-summary,
.status-summary {
  font-size: 8px;
  font-weight: 600;
  color: #000000;
}

/* Dark mode for Swift Algo Trend Table */
.dark-mode .swift-algo-trend-table-container {
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid rgba(52, 211, 153, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.dark-mode .swift-algo-trend-table-header {
  background: rgba(31, 41, 55, 0.9);
  border-bottom: 1px solid rgba(52, 211, 153, 0.4);
  color: #34D399;
}

.dark-mode .trend-grid-cell {
  background: rgba(31, 41, 55, 0.7);
  border-color: rgba(52, 211, 153, 0.3);
}

.dark-mode .trend-grid-cell:hover {
  background: rgba(31, 41, 55, 0.9);
  border-color: rgba(52, 211, 153, 0.5);
}

.dark-mode .trend-grid-cell.overall-cell {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
}

.dark-mode .cell-timeframe {
  color: #34D399;
}

/* Dark mode trend icons - same colors, good contrast */
.dark-mode .trend-icon.bullish {
  color: #10B981;
}

.dark-mode .trend-icon.bearish {
  color: #EF4444;
}

/* Dark mode strength indicators */
.dark-mode .strength-indicator.strength-high .strength-dot,
.dark-mode .strength-indicator.strength-high .strength-text {
  color: #10B981;
}

.dark-mode .strength-indicator.strength-medium .strength-dot,
.dark-mode .strength-indicator.strength-medium .strength-text {
  color: #F59E0B;
}

.dark-mode .strength-indicator.strength-low .strength-dot,
.dark-mode .strength-indicator.strength-low .strength-text {
  color: #EF4444;
}

/* Dark mode status indicators */
.dark-mode .status-indicator.trending {
  color: #10B981;
}

.dark-mode .status-indicator.ranging {
  color: #EF4444;
}

/* Dark mode overall row */
.dark-mode .swift-trend-grid-row.overall-row {
  background: #2c2c2e;
  border-top: 2px solid #3a3a3c;
}

.dark-mode .swift-trend-grid-row.overall-row .timeframe-cell {
  color: #ffffff;
}

.dark-mode .trend-summary,
.dark-mode .strength-summary,
.dark-mode .status-summary {
  color: #ffffff;
}

.dark-mode .swift-algo-trend-table-container .swift-trend-grid-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Small Size Styles */
.swift-algo-trend-table-container.size-small .swift-algo-trend-table-header {
  padding: 4px;
  font-size: 8px;
}

.swift-algo-trend-table-container.size-small .swift-algo-trend-grid {
  gap: 3px;
  padding: 3px;
}

.swift-algo-trend-table-container.size-small .trend-grid-cell {
  padding: 3px;
}

.swift-algo-trend-table-container.size-small .cell-timeframe {
  font-size: 8px;
  margin-bottom: 2px;
}

.swift-algo-trend-table-container.size-small .cell-indicators {
  gap: 4px;
}

.swift-algo-trend-table-container.size-small .cell-trend {
  font-size: 12px;
}

.swift-algo-trend-table-container.size-small .cell-strength {
  font-size: 8px;
}

.swift-algo-trend-table-container.size-small .cell-status {
  font-size: 8px;
}

.swift-algo-trend-table-container-old-small .strength-indicator {
  gap: 4px;
  font-size: 8px;
}

.swift-algo-trend-table-container.size-small .strength-dot {
  font-size: 9px;
}

.swift-algo-trend-table-container.size-small .strength-text {
  font-size: 8px;
}

.swift-algo-trend-table-container.size-small .status-indicator {
  font-size: 12px;
}

.swift-algo-trend-table-container.size-small .trend-summary,
.swift-algo-trend-table-container.size-small .strength-summary,
.swift-algo-trend-table-container.size-small .status-summary {
  font-size: 7px;
}

/* Old styles for modal - keep for compatibility */
.swift-algo-trend-table {
  width: 100%;
  font-family: var(--font-ui);
  padding: 16px;
  background: transparent;
}

.swift-trend-table-row {
  display: grid;
  grid-template-columns: 70px 60px 90px 60px;
  gap: 8px;
  padding: 10px 8px;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  align-items: center;
  transition: background 0.2s ease;
}

.swift-trend-table-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.swift-trend-table-header-row {
  font-weight: 600;
  font-size: 9px;
  color: #48484A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  padding: 6px 8px 10px;
  margin-bottom: 4px;
}

.swift-trend-table-header-row:hover {
  background: transparent;
}

.swift-trend-table-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #1D1D1F;
  font-weight: 500;
}

.swift-timeframe-cell {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
}

.swift-trend-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.swift-trend-icon.swift-bullish {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.swift-trend-icon.swift-bearish {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.swift-strength-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.swift-strength-text {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.swift-ranging-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.swift-overall-row {
  background: rgba(0, 0, 0, 0.03);
  font-weight: 600;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  margin-top: 4px;
}

.swift-overall-row:hover {
  background: rgba(0, 0, 0, 0.05);
}

.swift-overall-indicator {
  font-size: 16px;
}

.swift-fraction {
  font-size: 11px;
  color: #6B7280;
  font-weight: 500;
}

/* Dark mode styles for Swift Algo Trend Table */
.dark-mode .swift-trend-table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-mode .swift-trend-table-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dark-mode .swift-trend-table-header-row {
  color: #8E8E93;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .swift-trend-table-cell {
  color: #F5F5F7;
}

.dark-mode .swift-overall-row {
  background: rgba(255, 255, 255, 0.03);
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .swift-overall-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode .swift-fraction {
  color: #9CA3AF;
}


/* ========================================
   TRADING PANEL BUTTON
   ======================================== */
.trading-panel-btn {
  height: 28px;
  padding: 0 12px;
  background: rgba(0, 122, 255, 0.1);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: #007AFF;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.trading-panel-btn:hover {
  background: rgba(0, 122, 255, 0.15);
  border-color: rgba(0, 122, 255, 0.3);
  transform: translateY(-1px);
}

.trading-panel-btn:active {
  transform: translateY(0);
}

/* ========================================
   CHATBOT MODAL
   ======================================== */
/* ========================================
   AI ASSISTANT SIDE PANEL
   ========================================
   The dock is a flex child of .chart-layout, so the width set on it is taken out of the
   chart rather than laid over it. The panel inside keeps the .chatbot-modal class so all
   the existing message, input and dark-mode styling still applies - only the positioning
   is overridden below. .chatbot-modal is shared with the AI Chart Painter, which is why
   none of its own rules are touched. */
.ai-panel-dock {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: 100%;
  padding: 8px 8px 8px 0;
  box-sizing: border-box;
}

/* Grab strip on the panel's left edge. Positioned over the gap rather than taking flex
   space of its own, so the chart sits the same 8px from the panel as it does from the
   drawing toolbar - taking space here made that side visibly wider than the other. */
/* Centred on the 8px gap, not hung off the panel's edge: left is -(width/2 + gap/2), so
   the visible line lands exactly between the chart and the panel. Wider than the gap so
   there is still something to grab, overhanging by 2px on each side. */
.ai-panel-resizer {
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 12px;
  cursor: col-resize;
  z-index: 2;
  border-radius: 3px;
  transition: background 0.15s ease;
}

.ai-panel-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 44px;
  border-radius: 2px;
  background: rgba(142, 142, 147, 0.35);
  transition: background 0.15s ease, height 0.15s ease;
}

.ai-panel-resizer:hover::after,
.ai-panel-resizer.dragging::after {
  background: #007AFF;
  height: 72px;
}

.dark-mode .ai-panel-resizer::after {
  background: rgba(255, 255, 255, 0.22);
}

.dark-mode .ai-panel-resizer:hover::after,
.dark-mode .ai-panel-resizer.dragging::after {
  background: #0A84FF;
}

/* Turns the floating popup into a full-height column filling the dock.
   The surface treatment is deliberately the chart wrapper's, not the popup's: the same
   border, the same soft shadow, the same radius. The popup's 0 20px 60px shadow exists to
   lift a floating box off the page, and docked beside the chart that reads as the panel
   hovering above the layout rather than sitting beside it. The heavy backdrop blur goes
   too - the panel is effectively opaque, so it was only costing paint work. */
.chatbot-modal.ai-side-panel {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  max-height: none;
  animation: none;
  background: #FBFBFD;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(142, 142, 147, 0.1);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(142, 142, 147, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Matches .dark-mode .chart-wrapper, which drops the shadow entirely and relies on a
   border against the near-black background. */
.chatbot-modal.ai-side-panel.dark-mode {
  background: #0F0F0F;
  border: 1px solid #2A2A2A;
  box-shadow: none;
}

.chatbot-modal.ai-side-panel .chatbot-messages {
  flex: 1 1 auto;
  min-height: 0;
  /* The popup capped this at 450px; in a full-height column it should just fill, or the
     input floats in the middle with dead space beneath it. */
  max-height: none;
  padding: 18px 16px;
  gap: 18px;
  scrollbar-width: thin;
}

/* ---- header ---------------------------------------------------------------- */
.ai-side-panel .chatbot-header {
  padding: 12px 12px 12px 14px;
  align-items: center;
}

.ai-side-panel .chatbot-title {
  gap: 10px;
  align-items: center;
}

.ai-side-panel .ai-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #007AFF, #5E5CE6);
  color: #fff;
  flex: 0 0 auto;
}

.ai-side-panel .ai-title-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.ai-side-panel .chatbot-title h3 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
}

.ai-side-panel .ai-subtitle {
  font-size: 11px;
  color: #86868B;
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-side-panel .ai-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ai-side-panel .ai-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #86868B;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ai-side-panel .ai-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1D1D1F;
}

.ai-side-panel.dark-mode .ai-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F5F5F7;
}

/* ---- empty state ----------------------------------------------------------- */
.ai-side-panel .ai-welcome {
  text-align: left;
  padding: 8px 2px;
  margin-top: auto;
  margin-bottom: auto;
}

.ai-side-panel .ai-welcome h4 {
  font-size: 20px;
  font-weight: 650;
  margin: 0 0 6px 0;
}

.ai-side-panel .ai-welcome p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 16px 0;
  color: #86868B;
}

.ai-side-panel .ai-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-side-panel .ai-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.015);
  color: #1D1D1F;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.ai-side-panel .ai-suggestion svg {
  color: #007AFF;
  flex: 0 0 auto;
}

.ai-side-panel .ai-suggestion:hover:not(:disabled) {
  border-color: rgba(0, 122, 255, 0.4);
  background: rgba(0, 122, 255, 0.06);
  transform: translateY(-1px);
}

.ai-side-panel .ai-suggestion:disabled {
  opacity: 0.5;
  cursor: default;
}

.ai-side-panel.dark-mode .ai-suggestion {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #F5F5F7;
}

.ai-side-panel.dark-mode .ai-suggestion:hover:not(:disabled) {
  border-color: rgba(10, 132, 255, 0.5);
  background: rgba(10, 132, 255, 0.12);
}

.ai-side-panel.dark-mode .ai-suggestion svg {
  color: #0A84FF;
}

/* ---- messages -------------------------------------------------------------- */
/* The assistant reads as plain prose rather than a bubble - long analysis in a
   bubble is hard to scan - while the user's own turn keeps one so the thread is
   still easy to follow. */
.ai-side-panel .chat-message.assistant .message-content {
  background: transparent;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* The dark theme gives assistant replies a grey bubble. That rule carries more classes
   than the one above and sits later in this file, so undoing it needs .chatbot-modal in
   the selector too. */
.chatbot-modal.ai-side-panel.dark-mode .chat-message.assistant .message-content {
  background: transparent;
  padding: 0;
}

.ai-side-panel .chat-message.user {
  justify-content: flex-end;
}

.ai-side-panel .chat-message.user .message-content {
  background: #007AFF;
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  padding: 9px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 85%;
}

/* Same specificity problem as the assistant bubble above. */
.chatbot-modal.ai-side-panel.dark-mode .chat-message.user .message-content {
  background: #0A84FF;
  color: #fff;
}

.ai-side-panel .message-avatar {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #007AFF, #5E5CE6);
  color: #fff;
  flex: 0 0 auto;
}

/* ---- composer -------------------------------------------------------------- */
.ai-side-panel .chatbot-input {
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}

.ai-side-panel .ai-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  padding: 8px 8px 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ai-side-panel .ai-composer:focus-within {
  border-color: rgba(0, 122, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.ai-side-panel .ai-composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: #1D1D1F;
  padding: 4px 0;
  max-height: 160px;
}

.ai-side-panel .ai-composer textarea::placeholder {
  color: #A1A1A6;
}

.ai-side-panel .ai-send-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: none;
  border-radius: 9px;
  background: #007AFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.ai-side-panel .ai-send-btn:hover:not(:disabled) {
  background: #0066D6;
}

.ai-side-panel .ai-send-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.ai-side-panel .ai-composer-hint {
  font-size: 10.5px;
  color: #A1A1A6;
  padding-left: 4px;
}

.ai-side-panel.dark-mode .ai-composer {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.ai-side-panel.dark-mode .ai-composer textarea {
  color: #F5F5F7;
}

.ai-side-panel.dark-mode .ai-send-btn {
  background: #0A84FF;
}

.ai-side-panel.dark-mode .ai-send-btn:hover:not(:disabled) {
  background: #3D9BFF;
}

.chatbot-modal {
  position: absolute;
  left: 52px;
  bottom: 54px;
  width: 400px;
  max-height: 600px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(80px) saturate(200%);
  -webkit-backdrop-filter: blur(80px) saturate(200%);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 10000;
  overflow: hidden;
  animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.chatbot-modal.dark-mode {
  background: rgba(30, 30, 30, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
}

.chatbot-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.chatbot-modal.dark-mode .chatbot-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

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

.chatbot-title svg {
  color: #007AFF;
}

.chatbot-modal.dark-mode .chatbot-title svg {
  color: #0A84FF;
}

.chatbot-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1D1D1F;
}

.chatbot-modal.dark-mode .chatbot-title h3 {
  color: #F5F5F7;
}

.chatbot-header .close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: #86868B;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.chatbot-header .close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1D1D1F;
}

.chatbot-modal.dark-mode .chatbot-header .close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #98989D;
}

.chatbot-modal.dark-mode .chatbot-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #F5F5F7;
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 300px;
  max-height: 450px;
}

.chatbot-welcome {
  text-align: center;
  padding: 40px 20px;
  color: #86868B;
}

.chatbot-welcome svg {
  opacity: 0.3;
  margin-bottom: 16px;
}

.chatbot-welcome h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0 0 12px 0;
}

.chatbot-modal.dark-mode .chatbot-welcome h4 {
  color: #F5F5F7;
}

.chatbot-welcome p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

.chatbot-hint {
  font-size: 13px !important;
  opacity: 0.7;
  margin-top: 16px !important;
}

.chat-message {
  display: flex;
  gap: 10px;
  animation: fadeIn 0.3s ease-out;
}

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

.chat-message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.chatbot-modal.dark-mode .message-avatar {
  background: linear-gradient(135deg, #0A84FF 0%, #64D2FF 100%);
}

.message-content {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-message.user .message-content {
  background: #007AFF;
  color: white;
  border-bottom-right-radius: 4px;
}

.chatbot-modal.dark-mode .chat-message.user .message-content {
  background: #0A84FF;
}

.chat-message.assistant .message-content {
  background: rgba(0, 0, 0, 0.05);
  color: #1D1D1F;
  border-bottom-left-radius: 4px;
}

.chatbot-modal.dark-mode .chat-message.assistant .message-content {
  background: rgba(255, 255, 255, 0.1);
  color: #F5F5F7;
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #86868B;
  animation: typingBounce 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

.chatbot-input {
  padding: 16px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.chatbot-modal.dark-mode .chatbot-input {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.chatbot-input input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  font-size: 14px;
  outline: none;
  background: rgba(0, 0, 0, 0.02);
  color: #1D1D1F;
  transition: all 0.2s ease;
}

.chatbot-input input:focus {
  border-color: #007AFF;
  background: white;
}

.chatbot-modal.dark-mode .chatbot-input input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: #F5F5F7;
}

.chatbot-modal.dark-mode .chatbot-input input:focus {
  border-color: #0A84FF;
  background: rgba(255, 255, 255, 0.08);
}

.chatbot-input input::placeholder {
  color: #86868B;
}

.chatbot-input button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #007AFF;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.chatbot-input button:hover:not(:disabled) {
  background: #0051D5;
  transform: scale(1.05);
}

.chatbot-input button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chatbot-modal.dark-mode .chatbot-input button {
  background: #0A84FF;
}

.chatbot-modal.dark-mode .chatbot-input button:hover:not(:disabled) {
  background: #006EDB;
}

/* ========================================
   AI CHART PAINTER MODAL
   ======================================== */
.chart-painter-modal {
  width: 440px !important;
  max-height: 680px !important;
  animation: slideInLeft 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Match the AI Chart Painter header title typography to the AI Chart Scanner */
.chart-painter-modal .chatbot-title h3 {
  font-size: 18px;
  color: #1a1a1a;
}

.chart-painter-modal.dark-mode .chatbot-title h3 {
  color: #ffffff;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.chart-painter-content {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(680px - 60px);
}

.painter-welcome {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(90, 200, 250, 0.08) 100%);
  border-radius: 14px;
  border: 1px solid rgba(0, 122, 255, 0.15);
}

.painter-welcome p {
  color: #1D1D1F;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

.painter-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.painter-option {
  background: rgba(248, 248, 248, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 16px 18px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.painter-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.03) 0%, rgba(90, 200, 250, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.painter-option:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 122, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 122, 255, 0.08);
  transform: translateY(-1px);
}

.painter-option:hover::before {
  opacity: 1;
}

.painter-option label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.painter-option input[type="checkbox"] {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #007AFF;
}

.option-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.option-title {
  font-weight: 600;
  font-size: 15px;
  color: #1D1D1F;
  display: block;
  letter-spacing: -0.01em;
}

.option-desc {
  font-size: 13px;
  color: #86868B;
  display: block;
  line-height: 1.5;
  font-weight: 400;
}

.option-colors {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  color: #6E6E73;
  font-weight: 500;
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.painter-apply-btn {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}

.painter-apply-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.painter-apply-btn:hover::before {
  left: 100%;
}

.painter-apply-btn:hover {
  background: linear-gradient(135deg, #0066DD 0%, #0044BB 100%);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.45), 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.painter-apply-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.painter-apply-btn svg {
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.painter-option input[type="number"] {
  outline: none;
}

.painter-option input[type="number"]:hover {
  border-color: rgba(0, 122, 255, 0.35) !important;
  background: rgba(0, 122, 255, 0.06) !important;
}

.painter-option input[type="number"]:focus {
  border-color: rgba(0, 122, 255, 0.5) !important;
  background: rgba(0, 122, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
}

/* Dark mode for Chart Painter */
.chart-painter-modal.dark-mode .painter-welcome {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.12) 0%, rgba(90, 200, 250, 0.12) 100%);
  border-color: rgba(10, 132, 255, 0.2);
}

.chart-painter-modal.dark-mode .painter-welcome p {
  color: #F5F5F7;
}

.chart-painter-modal.dark-mode .painter-option {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.1);
}

.chart-painter-modal.dark-mode .painter-option::before {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.05) 0%, rgba(90, 200, 250, 0.05) 100%);
}

.chart-painter-modal.dark-mode .painter-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(10, 132, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(10, 132, 255, 0.15);
}

.chart-painter-modal.dark-mode .option-title {
  color: #F5F5F7;
}

.chart-painter-modal.dark-mode .option-desc {
  color: #98989D;
}

.chart-painter-modal.dark-mode .option-colors {
  color: #AEAEB2;
}

.chart-painter-modal.dark-mode .color-dot {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.chart-painter-modal.dark-mode input[type="checkbox"] {
  accent-color: #0A84FF;
}

.chart-painter-modal.dark-mode input[type="number"] {
  background: rgba(10, 132, 255, 0.08) !important;
  border-color: rgba(10, 132, 255, 0.25) !important;
  color: #F5F5F7 !important;
}

.chart-painter-modal.dark-mode input[type="number"]:hover {
  border-color: rgba(10, 132, 255, 0.4) !important;
  background: rgba(10, 132, 255, 0.12) !important;
}

.chart-painter-modal.dark-mode input[type="number"]:focus {
  border-color: rgba(10, 132, 255, 0.6) !important;
  background: rgba(10, 132, 255, 0.15) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2) !important;
}

.chart-painter-modal.dark-mode label[style*="fontSize"] {
  color: #AEAEB2 !important;
}

.chart-painter-modal.dark-mode .painter-apply-btn {
  background: linear-gradient(135deg, #0A84FF 0%, #0066DD 100%);
  box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.chart-painter-modal.dark-mode .painter-apply-btn:hover {
  background: linear-gradient(135deg, #0077ED 0%, #0055CC 100%);
  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.25);
}



/* ========================================
   CHART SCANNER ANIMATIONS
   ======================================== */
@keyframes scan-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

@keyframes scan-line {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.scanning-animation svg {
  filter: drop-shadow(0 0 8px rgba(10, 132, 255, 0.6));
}

/* ========================================
   CHART SCANNER MODAL
   ======================================== */
.chart-scanner-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-height: 80vh;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-scanner-modal.dark-mode {
  background: #1E1E1E;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.chart-scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #f8f9fa;
}

.chart-scanner-modal.dark-mode .chart-scanner-header {
  background: #2a2a2a;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.chart-scanner-header .chatbot-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1a1a1a;
  flex: 1;
}

.chart-scanner-header .chatbot-title svg {
  stroke: #1a1a1a;
}

.chart-scanner-header .chatbot-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.chart-scanner-modal.dark-mode .chart-scanner-header .chatbot-title {
  color: #ffffff;
}

.chart-scanner-modal.dark-mode .chart-scanner-header .chatbot-title svg {
  stroke: #ffffff;
}

.chart-scanner-modal.dark-mode .chart-scanner-header .chatbot-title h3 {
  color: #ffffff;
}

.chart-scanner-header .close-btn {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  color: #666;
  font-size: 24px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.chart-scanner-header .close-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
  color: #1a1a1a;
}

.chart-scanner-modal.dark-mode .chart-scanner-header .close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #999;
}

.chart-scanner-modal.dark-mode .chart-scanner-header .close-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.chart-scanner-header .close-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chart-scanner-content {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(80vh - 80px);
}

.chart-scanner-content::-webkit-scrollbar {
  width: 8px;
}

.chart-scanner-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.chart-scanner-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.chart-scanner-modal.dark-mode .chart-scanner-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.chart-scanner-modal.dark-mode .chart-scanner-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* ========================================
   TRADING PANEL MODAL
   ======================================== */
.trading-panel-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(80px) saturate(200%);
  -webkit-backdrop-filter: blur(80px) saturate(200%);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(142, 142, 147, 0.12);
}

.trading-panel-modal.dark-mode {
  background: rgba(28, 28, 30, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
}

.trading-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(142, 142, 147, 0.12);
}

.trading-panel-modal.dark-mode .trading-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.trading-panel-header h3 {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0;
}

.trading-panel-modal.dark-mode .trading-panel-header h3 {
  color: #F5F5F7;
}

.clear-history-btn {
  padding: 6px 12px;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: #ff3b30;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
  margin-right: 8px;
}

.clear-history-btn:hover {
  background: rgba(255, 59, 48, 0.15);
  border-color: rgba(255, 59, 48, 0.5);
}

.trading-panel-modal.dark-mode .clear-history-btn {
  background: rgba(255, 69, 58, 0.12);
  border-color: rgba(255, 69, 58, 0.35);
  color: #ff453a;
}

.trading-panel-modal.dark-mode .clear-history-btn:hover {
  background: rgba(255, 69, 58, 0.18);
  border-color: rgba(255, 69, 58, 0.5);
}

.trading-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.no-trades-message {
  text-align: center;
  padding: 40px 20px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: #86868B;
}

.trades-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trade-item {
  background: rgba(142, 142, 147, 0.08);
  border-radius: 8px;
  padding: 12px;
  border-left: 3px solid;
}

.trade-item.buy {
  border-left-color: #3b82f6;
}

.trade-item.sell {
  border-left-color: #ef4444;
}

.trading-panel-modal.dark-mode .trade-item {
  background: rgba(255, 255, 255, 0.08);
}

.trade-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.trade-number {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #86868B;
}

.trade-type {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.trade-type.buy {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.trade-type.sell {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.trade-status {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: auto;
}

.trade-status.open {
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
}

.trade-status.closed {
  background: rgba(142, 142, 147, 0.15);
  color: #86868B;
}

.trade-item-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trade-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 13px;
}

.trade-label {
  color: #86868B;
  font-weight: 500;
}

.trade-value {
  color: #1D1D1F;
  font-weight: 500;
}

.trading-panel-modal.dark-mode .trade-value {
  color: #F5F5F7;
}

.pnl-row {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(142, 142, 147, 0.12);
}

.trading-panel-modal.dark-mode .pnl-row {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.trade-pnl {
  font-weight: 600;
  font-family: var(--font-mono);
}

.trade-pnl.profit {
  color: #34C759;
}

.trade-pnl.loss {
  color: #FF3B30;
}

.trading-panel-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
  background: rgba(142, 142, 147, 0.08);
  border-radius: 8px;
  margin-top: auto;
}

.trading-panel-modal.dark-mode .trading-panel-summary {
  background: rgba(255, 255, 255, 0.08);
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: #86868B;
  font-weight: 500;
}

.summary-value {
  font-family: var(--font-ui);
  font-size: 16px;
  color: #1D1D1F;
  font-weight: 600;
}

.trading-panel-modal.dark-mode .summary-value {
  color: #F5F5F7;
}

/* ========================================
   MOBILE  (max-width: 768px)
   ========================================
   Everything from here down sits inside one media query, so the desktop layout above is
   untouched by construction - no rule here can match a desktop viewport.

   It lives in this file rather than mobile.css because main.jsx imports mobile.css BEFORE
   the component styles, so its overrides lose the cascade to this file at equal
   specificity. That is why several of them never took effect.
   ======================================== */
@media (max-width: 768px) {

  /* --- Centred dialogs ------------------------------------------------------
     Each of these is a fixed-width desktop dialog between 400px and 760px, so on a phone
     they ran off both edges with their controls unreachable. They stay centred; only the
     width follows the viewport, and the height is capped so tall panels scroll inside
     themselves rather than off-screen. !important is needed because
     .chart-painter-modal declares its width that way. */
  .profile-modal,
  .chart-settings-modal,
  .symbol-modal,
  .settings-drawer,
  .indicator-modal,
  .indicator-settings-modal-wrapper,
  .trade-checker-modal,
  .fib-levels-modal,
  .chatbot-modal,
  .chart-painter-modal,
  .chart-scanner-modal,
  .trading-panel-modal,
  .journal-dashboard-modal,
  .alert-modal {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    min-width: 0 !important;
    /* !important on the height too, not just the width: .chart-painter-modal declares
       its own max-height and was winning against the plain cap, so it stayed at 680px
       while everything around it shrank. These are caps, so raising specificity only
       ever pulls a panel down to the limit - a dialog already shorter is untouched. */
    max-height: 68vh !important;
    max-height: 68dvh !important;
  }

  /* iOS Safari zooms the page in whenever a text field under 16px takes focus, and it does
     not zoom back out afterwards - tap the symbol search and you are left magnified in a
     corner of the chart with no obvious way back. 16px is the documented threshold, and
     raising the field to it is the only fix that does not involve disabling pinch zoom,
     which the viewport tag deliberately allows. The four fields this catches - symbol
     search, alert price, alert type and the trade note - are inline-styled or carry no
     class, hence the element selectors and the !important. */
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Anchored inside the chart rather than centred, so they only need their floor removed */
  .order-panel,
  .replay-panel {
    min-width: 0;
    max-width: calc(100vw - 16px);
  }

  /* Both hang off right: 20px at a fixed desktop width. The watchlist is 360px, which on a
     375px screen put its left edge at -5 and took the first character of every row and the
     drawer's own close button with it. Capping to the viewport keeps the 20px anchor and
     gives the same margin on the left. The position calculator is 340px and already fit,
     but it is the same construction and would break on anything narrower. */
  .watchlist-drawer,
  .position-calc-drawer {
    max-width: calc(100vw - 40px);
  }

  /* The pending-order controls that appear on a BUY or SELL clear the price axis with a
     hard right: 250px, which is the axis width on a desktop. Here the axis is about 56px
     and the whole chart wrapper only 323px, so that offset put the overlay's right edge
     117px from the left of the screen and hid 49% of it - the take-profit, stop-loss and
     size controls were all off-screen to the left, leaving just the P&L box visible and
     no way to reach the rest. 64px clears the axis at this width with the full 229px of
     controls inside the chart. */
  .pending-order-overlay {
    right: 64px;
  }

  /* .chatbot-modal pins itself 52px from the left to clear the desktop tool column, which
     the width above turns into a right edge 8px off a 375px screen. Centre it on the same
     44px of total margin the other dialogs use. The docked .ai-side-panel variant sets
     left: auto at a higher specificity, so it keeps flowing in its column. */
  .chatbot-modal {
    left: 22px;
  }

  /* The settings panel reserved 300px for its scroll area on top of header, tabs and
     footer - taller than a phone in landscape. Let it shrink and scroll instead. */
  .indicator-settings-content {
    min-height: 0;
    max-height: none;
  }

  /* --- Content inside the dialogs -------------------------------------------
     The market filters are 505px of chips in a 329px row set to scroll, so Forex,
     Indices and Stocks sat past the edge with nothing to indicate they existed - the
     row reads as though the app only has three categories. Wrapping shows all six.
     They are filter chips rather than primary actions, so they give up the 44px floor
     to keep the two rows they now occupy from eating the list below. */
  .category-filters {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .category-btn {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 11px;
  }

  /* Each symbol row reserved 150px that refuses to shrink for two badges needing 70,
     which left 31px for the ticker and squeezed the name to nothing - every row read
     "BTCUSD" with no "Bitcoin" after it. Letting the badges size to their content hands
     roughly 80px back to the name. */
  .symbol-item-meta {
    min-width: 0;
    flex-shrink: 1;
  }

  /* That still left names ellipsising to "Poly...". The provider badge is the cheapest
     thing on the row to give up: it repeats down the whole list and says nothing about
     the symbol being picked, unlike the asset type beside it. */
  .symbol-source {
    display: none;
  }

  /* The Trade Dashboard header put a 22px title and the auto-sync toggle side by side
     with 60px of padding around them, which needs ~360px against the 271px a phone
     leaves. Both wrapped mid-word - the toggle became eight lines of stacked text inside
     its pill and the header alone ate 130px of a 552px panel. Letting the two sit on
     separate rows keeps each on one line. !important throughout because the values it is
     overriding are inline. */
  .journal-dashboard-header {
    padding: 12px 14px !important;
  }

  .journal-dashboard-header h2 {
    font-size: 16px !important;
  }

  .journal-dashboard-title-group {
    flex-wrap: wrap;
    gap: 8px !important;
    min-width: 0;
  }

  /* --- Trade Dashboard body -------------------------------------------------
     None of these grids collapse on their own, so at 263px of content width the
     dashboard was not merely large, it was broken: the 12-column grid resolved to
     3.58px columns and squeezed its panels to 74px wide by 1296px tall, and the trades
     row laid out 326px and 860px children inside a 263px box. Each one is given a
     column count a phone can actually render. Values are inline throughout, hence
     !important on everything that overrides them. */
  .journal-dashboard-content {
    padding: 12px !important;
  }

  /* Two up rather than one: the tiles are a label and a number, so a pair per row fits
     comfortably and halves the scrolling to reach the rest. */
  /* minmax(0, 1fr) rather than a bare 1fr: 1fr means minmax(auto, 1fr), and a grid item's
     automatic minimum is its own content, so a tile with a long label ("Avg win-loss
     ratio") widened its track past the half it was given instead of wrapping - which is
     what pushed the grid 124px wider than the panel holding it. */
  .journal-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .journal-stats-grid > div {
    padding: 10px !important;
    border-radius: 10px !important;
    min-width: 0;
  }

  /* The number line. 32px of it was most of a 114px tile's height. */
  .journal-stats-grid > div > div:last-child {
    font-size: 18px !important;
  }

  .journal-main-grid,
  .journal-trades-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  /* The panels inside the 12-column grid position themselves with grid-column: span N,
     which means nothing once there is a single column - and left them overlapping. */
  .journal-main-grid > div,
  .journal-trades-row > div {
    grid-column: auto !important;
    padding: 12px !important;
    min-width: 0;
  }

  .journal-calendar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Left to size itself the week came to 812px against 275px of card - three screens of
     sideways scrolling. Most of that was the 140px weekly-summary column and day cells
     sized to their P&L text. Pinning both brings a week to roughly 380px, so it is closer
     to a nudge than a journey, while keeping seven days on one row. */
  /* Two levels: the weekday header is a direct child, but the week rows sit one deeper
     inside a flex wrapper, so a single > div rule only ever reached the header. The
     declaration is inert on the cells it also matches, which are not grids. */
  .journal-calendar > div,
  .journal-calendar > div > div {
    grid-template-columns: repeat(7, minmax(34px, 1fr)) 76px !important;
    gap: 4px !important;
  }

  .journal-calendar {
    font-size: 10px;
  }

  /* --- Touch targets --------------------------------------------------------
     mobile.css gives every <button> a 44px minimum for touch. That is right for toolbar
     buttons, but these are icon-sized controls pinned inside fixed-height rows and
     badges - a 22px info icon became 44px and broke the row it sits in. Their padded hit
     area still exceeds the icon itself. */
  .info-tip-btn,
  .indicator-badge-icon-btn,
  .symbol-favorite-btn {
    min-height: 0;
    min-width: 0;
  }

  /* The indicator badge is 63x21 - under half the 44px target - and it is pinned over the
     top-left candles, so it cannot just be made bigger without covering the price action
     it labels. The hit area is pushed out past the ink instead, which costs no layout: the
     badge still draws at 63x21 but answers to a tap across roughly 87x39. */
  .indicator-badge-header {
    position: relative;
  }

  .indicator-badge-header::before {
    content: '';
    position: absolute;
    inset: -9px -12px;
  }

  /* The extension above is positioned, so in this stacking context it would paint - and
     hit-test - over the in-flow icon buttons and swallow the taps meant for them. Giving
     the buttons a position too puts DOM order back in charge, and they come after it. */
  .indicator-badge-icon-btn {
    position: relative;
    padding: 4px;
  }

  /* --- Buy / Sell / size overlay --------------------------------------------
     These three float over the chart rather than sitting in a bar, so the 44px floor
     was spending 168x44 - 45% of a 375px viewport - on controls whose own type is
     10px and which only need ~26px to render. They also sit directly over the top-left
     of the price action, which is the part of the chart worth seeing on a phone.

     Deliberately below the 44px touch guideline: these are pinned over content on the
     smallest screens, where the space they were taking cost more than the extra few
     pixels of target bought. Scoped to .trade-buttons-panel so the full-size BUY/SELL
     inside the trading panel modal are untouched. */
  .trade-buttons-panel {
    gap: 4px;
  }

  .trade-buttons-panel .order-btn {
    min-height: 26px;
    height: 26px;
    min-width: 36px;
    padding: 0 8px;
    font-size: 9px;
    letter-spacing: 0.2px;
  }

  .trade-buttons-panel .quantity-btn {
    min-height: 26px;
    height: 26px;
    min-width: 0;
    padding: 0 6px;
    gap: 2px;
    font-size: 9px;
  }

  .trade-buttons-panel .quantity-btn svg {
    width: 8px;
    height: 8px;
  }

  /* The size menu behind that button was 101x652 - 29% of the chart, and deeper than the
     plot area, so reaching $100K meant scrolling a list that was already covering the
     candles. Almost all of it was the 44px button floor applied eighteen times over: the
     values are four characters of 10px type and need nothing like that. Two columns as
     well as shorter rows, because a single column was spending 101px of width on "$100"
     and paying for it in height. The whole list now opens at once with no scrolling. */
  .quantity-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 4px;
    min-width: 104px;
  }

  /* "Custom..." is half again as long as any value in the list, and as a grid item it was
     setting the width of both columns from one cell - which dragged the menu wider than
     the single column it replaced. Given the full row it stops competing, and the columns
     size to "$100K" instead. */
  .quantity-option:last-child {
    grid-column: 1 / -1;
  }

  /* The controls that appear on a BUY or SELL sit on the price line itself, so their height
     is taken straight out of the candles they are pointing at. TP, SL and the confirm were
     44x44 each - the touch floor again - around 11px labels, and the P&L box spent 107px on
     nine characters. These are the same numbers .trade-buttons-panel above was cut to, and
     for the same reason: pinned over the plot area on the smallest screens, where the space
     costs more than the target. Scoped to .pending-order-overlay, so the equivalents inside
     the trading panel modal keep their full size. */
  /* 6px top and bottom on the row was 12px of pure height added to controls that already
     size themselves, and it sits on the price line, so it read as the overlay being deeper
     than it needed to be rather than as breathing room. */
  .pending-order-controls {
    gap: 4px;
    padding: 0;
  }

  .pending-order-overlay .po-btn {
    min-height: 24px;
    height: 24px;
    min-width: 28px;
    padding: 0 6px;
    font-size: 9px;
  }

  .pending-order-overlay .po-pnl {
    font-size: 9px;
    padding: 3px 7px;
  }

  .pending-order-overlay .po-btn.po-close {
    min-width: 0;
    padding-left: 6px;
    font-size: 13px;
  }

  /* Below the 44px guideline on purpose, as with the context menu: these are full-width
     cells in a list rather than icon squares, and the menu is pinned over the price
     action, where the height cost more than the target gained. */
  .quantity-option {
    min-height: 24px;
    height: auto;
    padding: 3px 6px;
    font-size: 10px;
    text-align: center;
  }

  /* --- Other chart overlays -------------------------------------------------
     Everything pinned over the chart competes with the candles for the same 248px of
     plot area. Trade Checker was the worst of them at 137x44 - 36% of the width - for
     a label whose own type is 13px; the rest of its height was the touch floor again.
     The ticker and indicator legend are read rather than tapped, so they only need to
     stay legible. */
  .trade-checker-btn {
    min-height: 26px;
    padding: 4px 8px;
    font-size: 10px;
    gap: 4px;
  }

  .trade-checker-btn svg {
    width: 11px;
    height: 11px;
  }

  .indicator-badge-name {
    font-size: 10px;
  }

  .asset-ticker-overlay {
    font-size: 11px;
  }

  /* --- Reclaiming plot area -------------------------------------------------
     The tool column is 44px wide while the buttons inside it were already cut to 36px
     further up, so 8px of every phone screen was empty column taken permanently from
     the chart. The dark selector is repeated for the same reason it is above:
     .dark-mode .drawing-toolbar out-specifies a bare .drawing-toolbar. */
  .drawing-toolbar,
  .dark-mode .drawing-toolbar {
    width: 36px;
    min-width: 36px;
  }

  /* The strip is already icon-only here (font-size: 0 above), so its 44px was the
     touch floor rather than anything being drawn. The strip declares its own 44px
     height, so shrinking only the buttons left the difference as dead space. */
  .bottom-strip button {
    min-height: 36px;
    height: 36px;
  }

  /* The strip's content also ran 343px into 323px of room, leaving the UTC clock 20px
     past the right edge - hidden behind the overflow-x: auto set up above rather than
     visibly clipped, so it read as simply missing. The 15px desktop gap was the whole
     overage: it costs 60px across the four buttons, and dropping it to 8px brings the
     row to 315px, which fits without scrolling. */
  .bottom-strip {
    height: 38px;
    gap: 8px;
  }

  /* --- Navbar ---------------------------------------------------------------
     Measured at 1114px of controls in a 375px viewport: logo 62 + centre group 800 +
     right group 220. It was set to scroll horizontally, which on a phone means two
     thirds of the buttons sit behind an invisible scrollbar - they are present but
     nobody can find them. Wrap onto as many rows as needed instead, and strip the
     labelled action buttons back to their icons so that costs two rows rather than four. */
  /* Fills .App rather than measuring the viewport a second time and risking a different
     answer than the one .App settled on. */
  .chart-container {
    height: 100%;
  }

  .navbar {
    height: auto;
    min-height: 48px;
    overflow-x: visible;
    overflow-y: visible;
    /* 6px rather than 8 sides: with the symbol button sized to its label, BTC/USD landed
       on exactly 52px of text in a 52px box. scrollWidth and clientWidth are integers, so
       that reads as fitting while the renderer still ellipsises on the sub-pixel
       remainder. The extra 4px puts it clear of the boundary. */
    /* No top safe-area inset here. It belonged with the black-translucent status bar, where
       the web view sat underneath the clock and the navbar had to hold its own contents
       clear of it. With the default status bar style iOS reserves that strip itself and
       paints it with theme-color, so adding the inset as well counts the status bar twice:
       the whole column shifts down by its height and the bottom strip is pushed off the
       screen, out of reach. The strip below still takes the bottom inset, because the view
       does extend under the home indicator. */
    padding: 4px 6px;
    gap: 4px;
  }

  /* max-width/min-width matter as much as flex-wrap here: these groups are flex items, and
     a flex item is sized by its content, so without a ceiling they simply grew to 557px
     and carried their buttons off-screen instead of wrapping inside the navbar. */
  .navbar-left,
  .navbar-center,
  .navbar-right {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }

  /* The centre group's 20px desktop gap costs 100px across its six controls - more than a
     quarter of the viewport spent on whitespace, which is what forced a second row. 4px
     rather than 5 buys back the last 5px a ticker like BTC/USD needs to render in full
     instead of ellipsising, and costs no touch target to do it. */
  .navbar-center,
  .navbar-right {
    gap: 4px;
  }

  /* The profile picture is the only thing left in the right group here - its icon
     buttons have moved into the menu behind it - so the 36px of padding that used to
     separate it from them is now just 36px of a 375px screen keeping the navbar on two
     rows. The divider went with them: it is position: fixed at a desktop coordinate, so
     with nothing to its left it was a stray line floating over the navbar. */
  .navbar-actions {
    padding-left: 0;
  }

  .navbar-actions::before {
    display: none;
  }

  /* Even with its icon buttons gone, the profile picture still wrapped: the right
     group's 20px margin put a single row at 365px against the 359px available, missing
     by 6. Without the margin it is 345px and fits. The centre group's auto left margin
     goes with it so the controls sit against the left edge and the remaining slack
     collects between them and the picture, which puts the picture on the right where it
     was before. */
  .navbar-center {
    margin-left: 0;
    margin-right: auto;
  }

  .navbar-right {
    margin-right: 0;
  }

  /* Dropping that margin left only 14px spare, which held for a short ticker but not for
     a longer one: BTC/USD widens the symbol button from 72px to 92px, put the row 1px
     over 359, and wrapped the profile picture onto a second line again.

     Shaving pixels would leave the layout depending on how long the ticker is, so the
     symbol button is made the part that yields instead - its label already ellipsises.
     That needs nowrap: a flex container wraps before it shrinks, so with wrap left on,
     flex-shrink never gets the chance to act. Wrapping was the right call when this
     bar carried eleven controls, but the four icon buttons have moved into the profile
     menu and the seven that remain fit on one line once the symbol can compress. Nothing
     is hidden by this - unlike the horizontal scroll wrapping originally replaced. */
  .navbar,
  .navbar-center {
    flex-wrap: nowrap;
  }

  .navbar-center {
    flex-shrink: 1;
    min-width: 0;
  }

  /* Floor it so a long ticker ellipsises rather than collapsing to nothing. 56px rather
     than 64 to match the trimmed padding below - the old floor would have held the button
     wider than its own content once the chrome came off. */
  .navbar-center .symbol-btn {
    flex-shrink: 1;
    min-width: 56px;
  }

  .navbar-center > *:not(.symbol-btn) {
    flex-shrink: 0;
  }

  /* font-size:0 collapses the labels, which are bare text nodes on three of these four
     buttons and so cannot be hidden by selecting an element. The icons are SVG and are
     unaffected; the count badge sets its own size back below. Each keeps its title
     attribute, so the label is still available on long-press. */
  /* 40px rather than 44: at 44 the centre group needed 368px against the 359px available
     and tipped onto a second row, which cost more than the 4px per button saves. */
  .navbar .indicators-btn {
    font-size: 0;
    gap: 0;
    padding: 8px;
    min-width: 36px;
    width: 36px;
  }

  .navbar .indicators-btn .indicators-count {
    font-size: 10px;
  }

  /* .indicators-text declares font-size: 14px of its own, so it survived the font-size: 0
     above and kept the Indicators button at 101px while its siblings collapsed to 44px. */
  .navbar .indicators-text {
    display: none;
  }

  /* The wordmark was taking an entire row to itself. The symbol button is the other
     reason the centre group needed two rows - capped and ellipsised, the whole group
     fits on one, which brings the navbar down from four rows to two. */
  .navbar-logo {
    display: none;
  }

  /* The coin logo (22px) and chevron left about 8px for the ticker, so "BTC/USD"
     ellipsised down to a bare "B". Dropping the logo gives the text room inside the same
     footprint. */
  .navbar .symbol-logo-small {
    display: none;
  }

  /* The market and timeframe controls are the only two labelled buttons left in the centre
     group - their four neighbours are already icon-only at 36px - so between them they
     took 159px of the 323px available. Both are trimmed to their text: side padding down
     from 12px to 8px and the icon gap from 6px to 4px, which pulls the button to roughly
     78px while still clearing BTC/USD at 11px without ellipsising. */
  .navbar .symbol-btn {
    max-width: 96px;
    overflow: hidden;
    padding: 6px 8px;
    gap: 4px;
  }

  /* 11px keeps a seven-character ticker inside the narrower cap. Widening the button
     instead would push the centre group onto a second row at 375px. */
  .navbar .symbol-text {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 32px of side padding and an 8px gap around a two-character label ("1m") made this the
     second-widest control in the bar at 67px. The same trim brings it to about 44px. The
     44px height is deliberately left alone on both: it is the touch-target floor, and
     these sit in a row with four 44px-tall icon buttons that would no longer line up. */
  .navbar .timeframe-dropdown-btn {
    padding: 6px 8px;
    gap: 4px;
    font-size: 12px;
    min-width: 38px;
  }

  /* --- Strips and toolbars --------------------------------------------------
     The bottom strip holds more buttons than a phone is wide; scroll it rather than
     letting the overflow spill across the chart. */
  /* Same treatment as the navbar: the strip grows by the bottom inset so its surface runs
     to the screen edge, under the home indicator, with the buttons sitting above it. */
  .bottom-strip {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Grows by the inset on top of the 38px set above rather than replacing that height,
       which would have given the strip back the 7px the row was trimmed to. */
    height: calc(38px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .bottom-strip::-webkit-scrollbar {
    display: none;
  }

  /* These buttons keep labels ("Chartify AI", "Trading Panel", ...) that are far wider
     than the 44px box mobile.css floors them at, and the strip was shrinking them on top
     of that - so the text spilled out and printed over the neighbouring button. Same
     icon-only treatment as the navbar, which fits all four plus the clock without
     scrolling, and flex-shrink: 0 stops the strip squeezing them again. */
  .bottom-strip > * {
    flex-shrink: 0;
  }

  .bottom-strip .indicators-btn {
    font-size: 0;
    gap: 0;
    padding: 8px;
    min-width: 40px;
    width: 40px;
  }

  .bottom-strip .indicators-count {
    font-size: 10px;
  }

  /* The tool column ran 784px of content into 756px of height, pushing Delete All
     Drawings past the bottom edge. Tightening the gap and padding recovers more than
     that, so every tool fits without scrolling. */
  /* .dark-mode .drawing-toolbar sets its own 12px padding and out-specifies a bare
     .drawing-toolbar, so the dark selector is repeated here to keep this deterministic
     rather than depending on which theme is active. */
  .drawing-toolbar,
  .dark-mode .drawing-toolbar {
    overflow-y: auto;
    padding: 4px 0;
    gap: 3px;
    scrollbar-width: none;
  }

  /* mobile.css floors every button at 44px; across ~15 tools that is 70px more than the
     column has between the navbar and the bottom strip, so the last tools fell off the
     bottom edge. 36px keeps them all on screen and is still a comfortable target. */
  .drawing-toolbar .tool-btn {
    min-height: 36px;
    height: 36px;
    min-width: 36px;
    width: 36px;
    padding: 0;
  }

  .drawing-toolbar::-webkit-scrollbar {
    display: none;
  }

  /* --- Floating popovers ----------------------------------------------------
     Both already clamp their left edge to the viewport in JS; this caps the width so a
     narrow phone cannot push them past the right edge either. */
  .info-tip-popover,
  .sensitivity-dropdown-menu,
  .context-menu {
    max-width: calc(100vw - 16px);
  }

  /* The chart's context menu opens under a double tap here, so it sits directly over the
     candles the tap was aimed at - at 186x208 it covered a quarter of the chart. These are
     the desktop paddings, sized for a pointer; the menu is a short list of four labels and
     reads fine much tighter. */
  .context-menu {
    min-width: 132px;
    padding: 5px;
    gap: 1px;
    border-radius: 10px;
  }

  /* Each item is a <button>, so mobile.css's 44px touch floor applied and held the rows at
     52px however little padding they were given - the same override the drawing toolbar
     needs. 34px is below that floor deliberately: these are list rows with the full width
     of the menu to hit, not 36px icon squares, so the row is still an easy target. */
  .context-menu-item {
    min-height: 30px;
    height: auto;
    padding: 5px 8px;
    gap: 7px;
    font-size: 11px;
    border-radius: 6px;
  }

  /* Declared at 14 on the element, so it needs overriding rather than inheriting. */
  .context-menu-item svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }

  /* "Alt + R" is a keyboard hint on a device with no keyboard to press it with, and at 48px
     of text plus its 16px gutter it was the widest thing in the row after the label - it,
     not the min-width, was holding the menu at 174px. */
  .context-menu-shortcut {
    display: none;
  }

  /* --- Bottom-strip panels --------------------------------------------------
     The four buttons in the bottom strip (Chartify AI, Trading Panel, Journal, Alerts)
     open panels sized for a desktop column. The dialog rule at the top of this block
     catches the ones that are centred overlays; these two are not. */

  /* The assistant docks rather than floating: .chatbot-modal.ai-side-panel is a flow
     child of .ai-panel-dock, which begins after the 52px tool rail. calc(100vw - 44px)
     is measured from the viewport, not from where the panel actually starts, so a 331px
     panel opening at x=54 ended at 385 on a 375px screen and lost its right edge - the
     scroll-to-bottom control and the composer's send button sat in the missing 10px.
     Both boxes need the cap, since the dock was the wider of the two at 380px. */
  /* The dock is a flex sibling of the chart, which is right when there is room for two
     columns. On a phone there is not: 313px of panel beside the 36px tool rail left the
     chart itself 10px wide - the candles were gone, and the Trade Checker button, which
     positions itself from the chart's width, was pushed to -91 and off the screen
     entirely. Taking the dock out of the flow lets the chart keep its full width and the
     panel sit over it, which is how a phone shows a side panel anyway.
     .chart-layout is already position: relative, so this anchors to it. */
  .ai-panel-dock {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-width: calc(100vw - 62px);
    min-width: 0;
  }

  .chatbot-modal.ai-side-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* With the field raised to 16px above, it was left 139px of the composer's 275 - the mode
     picker, credit count and send button take the rest - and "Ask about this chart..."
     wrapped to two lines inside a one-line box. Letting the composer wrap puts the field on
     its own row at 253px, which is what the space wants on a phone regardless. */
  .chatbot-modal.ai-side-panel .ai-composer {
    flex-wrap: wrap;
  }

  .chatbot-modal.ai-side-panel .ai-composer > textarea {
    flex: 1 1 100%;
  }

  .chatbot-modal.ai-side-panel .ai-composer-right {
    margin-left: auto;
  }

  /* The journal's "i" badges are 18px wide, but each carries a 260px tooltip in ::after,
     absolutely positioned and centred on the badge. It is hidden with visibility rather
     than display, and a visibility: hidden box still contributes to scrollWidth - so all
     23 of them pushed ~138px of invisible overflow into whatever tile they sat in, 26px
     of which reached the dashboard itself. Taking the tooltip out of layout until it is
     wanted removes that entirely. The width cap then keeps the tooltip on screen when it
     does appear, which a 260px box centred inside a 331px panel could not manage. */
  .journal-stat-info::after,
  .journal-stat-info::before {
    display: none;
  }

  .journal-stat-info:hover::after,
  .journal-stat-info:hover::before {
    display: block;
  }

  .journal-stat-info:hover::after {
    width: min(220px, calc(100vw - 80px));
  }

  /* The bottom strip's alerts panel is built from inline styles with no class of its own,
     so nothing here could reach it - and it could not borrow .alert-modal, which
     AlertModal.css already owns and styles for a different component. It gets its own hook
     instead. !important throughout because the values being overridden are inline, and the
     numbers match the dialog rule at the top of this block so the two line up when the
     bottom strip switches between panels rather than shifting by 3px. */
  .price-alerts-modal {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    max-height: 68vh !important;
    max-height: 68dvh !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .price-alerts-modal h2 {
    font-size: 16px !important;
  }
}

/* ---- Chartify AI: working steps and streamed text -------------------------- */
/* The assistant can spend half a minute reading candles and drawing before it
   says anything. These are the two things that make that wait legible: a list of
   what it is doing, and text that arrives as it is written. */

.ai-side-panel .message-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.ai-side-panel .ai-step-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(142, 142, 147, 0.08);
  border: 1px solid rgba(142, 142, 147, 0.12);
  font-size: 11.5px;
  line-height: 1.35;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-step-list {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.07);
}

.ai-side-panel .ai-step {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #6E6E73;
}

/* Each step slides in as it is announced, so the list reads as work being done.
   Only while live: the settled copy of a reply is a different DOM element, and
   replaying the entry animation there made the finished answer look like it
   flickered out and back the moment it completed. */
.ai-side-panel .ai-step-list.is-live .ai-step {
  animation: aiStepIn 0.22s ease-out both;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-step { color: #98989D; }

@keyframes aiStepIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

.ai-side-panel .ai-step.running { color: #007AFF; }
.chatbot-modal.ai-side-panel.dark-mode .ai-step.running { color: #0A84FF; }
.ai-side-panel .ai-step.done .ai-step-icon { color: #34C759; }
.ai-side-panel .ai-step.error .ai-step-icon { color: #FF9500; }

.ai-side-panel .ai-step-icon {
  width: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
}

.ai-side-panel .ai-step-spinner {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  animation: aiSpin 0.65s linear infinite;
}

@keyframes aiSpin { to { transform: rotate(360deg); } }

/* Label and detail share a wrapping row, so a long detail drops to its own
   line under the label instead of being clipped in a narrow panel. */
.ai-side-panel .ai-step-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
}

.ai-side-panel .ai-step-label { flex: 0 0 auto; }

.ai-side-panel .ai-step-detail {
  color: #AEAEB2;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-step-detail { color: #6E6E73; }


@media (prefers-reduced-motion: reduce) {
  .ai-side-panel .ai-step { animation: none; }
}

/* ---- Chartify AI: reading surface ------------------------------------------ */
/* Rewritten to read like a document rather than a chat toy. Three decisions do
   most of the work: the user's turn is a neutral chip instead of a saturated
   blue banner, the assistant is plain prose with no bubble and no avatar, and
   the vertical rhythm is set here rather than by inline styles. Brand blue is
   spent only where it means something - the send button and a running step. */

.chatbot-modal.ai-side-panel .chatbot-messages {
  padding: 18px 16px 8px;
  gap: 0;
}

.ai-side-panel .chat-message {
  gap: 0;
  margin: 0 0 22px;
  align-items: flex-start;
}

.ai-side-panel .chat-message:last-child { margin-bottom: 6px; }

/* The reader's own words: sized to content, right-aligned, quiet. */
.ai-side-panel .chat-message.user .message-content,
.chatbot-modal.ai-side-panel.dark-mode .chat-message.user .message-content {
  background: rgba(120, 120, 128, 0.10);
  color: #1D1D1F;
  border-radius: 16px;
  padding: 9px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 88%;
  width: fit-content;
  margin-left: auto;
}

.chatbot-modal.ai-side-panel.dark-mode .chat-message.user .message-content {
  background: rgba(255, 255, 255, 0.08);
  color: #F2F2F7;
}

.ai-side-panel .chat-message.assistant .message-content,
.chatbot-modal.ai-side-panel.dark-mode .chat-message.assistant .message-content {
  font-size: 13.5px;
  line-height: 1.68;
  color: #1D1D1F;
  letter-spacing: -0.003em;
}

.chatbot-modal.ai-side-panel.dark-mode .chat-message.assistant .message-content {
  color: #E8E8ED;
}

.ai-side-panel .message-body { gap: 12px; }

/* Vertical rhythm for the prose itself. */
.ai-side-panel .chat-line { margin: 0; }
.ai-side-panel .chat-line + .chat-line { margin-top: 0.55em; }
.ai-side-panel .chat-gap { height: 0.7em; }

.ai-side-panel .chat-bullet {
  display: flex;
  gap: 9px;
  padding-left: 2px;
}
.ai-side-panel .chat-bullet + .chat-bullet { margin-top: 0.3em; }
.ai-side-panel .chat-bullet-dot {
  flex: 0 0 auto;
  opacity: 0.45;
  line-height: inherit;
}

.ai-side-panel .message-content strong {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Steps sit between paragraphs, so they read as an aside: no border, barely a
   background, and a tick that confirms rather than shouts. */
.ai-side-panel .ai-step-list {
  background: rgba(120, 120, 128, 0.055);
  border: none;
  border-radius: 10px;
  padding: 8px 11px;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.4;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-step-list {
  background: rgba(255, 255, 255, 0.045);
}

.ai-side-panel .ai-step { color: #86868B; gap: 8px; }
.chatbot-modal.ai-side-panel.dark-mode .ai-step { color: #8E8E93; }

.ai-side-panel .ai-step.done .ai-step-icon { color: #34C759; opacity: 0.9; }
.ai-side-panel .ai-step.running { color: #007AFF; }
.chatbot-modal.ai-side-panel.dark-mode .ai-step.running { color: #0A84FF; }

.ai-side-panel .ai-step-label { font-weight: 500; }

.ai-side-panel .ai-step-detail {
  color: #AEAEB2;
  font-weight: 400;
}
.chatbot-modal.ai-side-panel.dark-mode .ai-step-detail { color: #636366; }

/* The caret should sit with the text, not jitter the line height. */
.ai-side-panel .message-content.is-streaming .chat-line:last-child::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.14em;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.5;
  animation: aiCaret 1.1s ease-in-out infinite;
}

@keyframes aiCaret {
  0%, 45% { opacity: 0.5; }
  55%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-side-panel .message-content.is-streaming .chat-line:last-child::after { animation: none; }
}

/* ---- Chartify AI: composer controls ---------------------------------------- */
/* Depth and balance sit inside the input box on their own row, so the composer
   reads as one object instead of a field with a strip of controls floating under
   it. The trigger is deliberately quiet - it is a setting, not an action. */

/* One row, as before: the input grows, the controls trail it. Stacking them
   nearly doubled the composer's height for no gain. */
.ai-side-panel .ai-composer-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.ai-side-panel .ai-mode-picker { position: relative; }

.ai-side-panel .ai-mode-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: #86868B;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  /* Pinned to the send button's height. Left to itself the panel's button
     styling rendered this at 40px and pushed the whole composer taller. */
  height: 30px;
  line-height: 1;
  padding: 0 7px 0 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
}

.ai-side-panel .ai-mode-trigger:hover:not(:disabled),
.ai-side-panel .ai-mode-trigger.open {
  background: rgba(120, 120, 128, 0.10);
  color: #1D1D1F;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-mode-trigger:hover:not(:disabled),
.chatbot-modal.ai-side-panel.dark-mode .ai-mode-trigger.open {
  background: rgba(255, 255, 255, 0.08);
  color: #F2F2F7;
}

.ai-side-panel .ai-mode-trigger:disabled { opacity: 0.45; cursor: default; }
.ai-side-panel .ai-mode-trigger svg { opacity: 0.7; }

/* Opens upward: the composer is pinned to the bottom of the panel. */
.ai-side-panel .ai-mode-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 208px;
  padding: 4px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.13);
  animation: aiMenuIn 0.13s ease-out both;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-mode-menu {
  background: #1C1C1E;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}

@keyframes aiMenuIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

.ai-side-panel .ai-mode-option {
  display: flex;
  flex-direction: column;
  /* The panel centres its buttons' contents by default, which shrink-wrapped the
     label row and left the option looking centred. Both are pinned here. */
  align-items: stretch;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}

.ai-side-panel .ai-mode-option:hover { background: rgba(120, 120, 128, 0.10); }
.chatbot-modal.ai-side-panel.dark-mode .ai-mode-option:hover { background: rgba(255, 255, 255, 0.07); }

.ai-side-panel .ai-mode-option-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #1D1D1F;
  font-size: 12.5px;
  font-weight: 550;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-mode-option-head { color: #F2F2F7; }
.ai-side-panel .ai-mode-option.selected .ai-mode-option-head svg { color: #007AFF; }
.chatbot-modal.ai-side-panel.dark-mode .ai-mode-option.selected .ai-mode-option-head svg { color: #0A84FF; }

.ai-side-panel .ai-mode-option-blurb {
  font-size: 11px;
  line-height: 1.35;
  color: #86868B;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-mode-option-blurb { color: #8E8E93; }

/* Just the number, in the header. "Credits" is carried by the tooltip; spelling
   it out beside the title competes with the symbol line for attention. */
.ai-side-panel .ai-credits {
  font-size: 11.5px;
  font-weight: 500;
  color: #86868B;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 6px;
  margin-right: 2px;
  border-radius: 6px;
  background: rgba(120, 120, 128, 0.10);
}

.ai-side-panel .ai-credits svg { opacity: 0.75; flex: 0 0 auto; }

.chatbot-modal.ai-side-panel.dark-mode .ai-credits {
  background: rgba(255, 255, 255, 0.07);
  color: #98989D;
}

.ai-side-panel .ai-credits.empty,
.chatbot-modal.ai-side-panel.dark-mode .ai-credits.empty {
  color: #FF9500;
  background: rgba(255, 149, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .ai-side-panel .ai-mode-menu { animation: none; }
}

/* ---- Chartify AI: undo the send-button styling on composer controls --------- */
/* The mode picker and its menu sit inside .chatbot-input, where `button` is
   styled as the round blue send button - 40px, 50% radius, and a dark blue
   hover that outranks a plain .ai-* rule (0,3,1 beats 0,3,0). That is why an
   option turned blue on hover and why the two-line rows were being squeezed
   into a 40px circle. These carry .chatbot-modal to win on specificity and
   reset the geometry the send button imposed. */

.chatbot-modal.ai-side-panel .chatbot-input .ai-mode-trigger {
  width: auto;
  min-width: 0;
  border-radius: 8px;
  transform: none;
  box-shadow: none;
}

/* Fills the menu. Undoing the send button's `width: 40px` with `auto` left each
   row shrink-wrapped to its text, so the highlight stopped short of the edge. */
.chatbot-modal.ai-side-panel .chatbot-input .ai-mode-option {
  width: 100%;
  min-width: 0;
  border-radius: 8px;
  transform: none;
  box-shadow: none;
}

.chatbot-modal.ai-side-panel .chatbot-input .ai-mode-option {
  height: auto;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: transparent;
  color: inherit;
}

.chatbot-modal.ai-side-panel .chatbot-input .ai-mode-trigger {
  height: 30px;
  background: transparent;
  color: #86868B;
}

/* Hover, at a specificity the send button's rule cannot outrank. */
.chatbot-modal.ai-side-panel .chatbot-input .ai-mode-trigger:hover:not(:disabled),
.chatbot-modal.ai-side-panel .chatbot-input .ai-mode-trigger.open {
  background: rgba(120, 120, 128, 0.12);
  color: #1D1D1F;
  transform: none;
}

.chatbot-modal.ai-side-panel.dark-mode .chatbot-input .ai-mode-trigger { color: #98989D; }

.chatbot-modal.ai-side-panel.dark-mode .chatbot-input .ai-mode-trigger:hover:not(:disabled),
.chatbot-modal.ai-side-panel.dark-mode .chatbot-input .ai-mode-trigger.open {
  background: rgba(255, 255, 255, 0.10);
  color: #F2F2F7;
}

.chatbot-modal.ai-side-panel .chatbot-input .ai-mode-option:hover:not(:disabled) {
  background: rgba(120, 120, 128, 0.12);
  color: inherit;
  transform: none;
}

.chatbot-modal.ai-side-panel.dark-mode .chatbot-input .ai-mode-option:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

/* Room for two lines of text, and a width that suits the panel. */
.chatbot-modal.ai-side-panel .ai-mode-menu {
  width: 232px;
  padding: 5px;
}

/* ---- Chartify AI: the reply's mark ----------------------------------------- */
/* Sits at the foot of each answer. It turns while the reply is being written and
   comes to rest when it is finished, so the panel reads as busy or done without
   a separate spinner taking up a line. */

.ai-side-panel .ai-message-mark {
  display: flex;
  align-items: center;
  height: 18px;
  margin-top: 2px;
  color: #C7C7CC;
  transition: color 0.4s ease;
}

.chatbot-modal.ai-side-panel.dark-mode .ai-message-mark { color: #48484A; }

.ai-side-panel .ai-message-mark.thinking { color: #007AFF; }
.chatbot-modal.ai-side-panel.dark-mode .ai-message-mark.thinking { color: #0A84FF; }

/* A slow turn with a slight breath to it - fast enough to read as working,
   slow enough not to pull the eye off the text being written beside it. */
.ai-side-panel .ai-message-mark.thinking svg {
  animation: aiMarkWorking 1.9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  transform-origin: 50% 50%;
}

@keyframes aiMarkWorking {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(0.78); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Settling in, so a finished mark doesn't just pop into place. */
.ai-side-panel .ai-message-mark:not(.thinking) svg {
  animation: aiMarkSettle 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes aiMarkSettle {
  from { transform: rotate(-70deg) scale(0.85); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-side-panel .ai-message-mark svg,
  .ai-side-panel .ai-message-mark.thinking svg { animation: none; }
}

/* A reply is already on screen by the time it finishes: it was streamed in word
   by word. The generic `.chat-message { animation: fadeIn }` then replayed on the
   stored copy - a different DOM element - so the finished answer visibly faded
   out and back. The streaming reveal is the entry animation for a reply; the
   user's own turn still fades in, since that one really does appear at once. */
.ai-side-panel .chat-message.assistant {
  animation: none;
}
.pwa-install-prompt {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: 500px;
  width: calc(100% - 40px);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.pwa-install-content {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.pwa-install-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.pwa-install-header svg {
  flex-shrink: 0;
}

.pwa-install-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  font-family: 'Outfit', sans-serif;
}

.pwa-install-header p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', sans-serif;
}

.pwa-install-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.pwa-btn-dismiss,
.pwa-btn-install {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  min-width: 90px;
}

.pwa-btn-dismiss {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.pwa-btn-dismiss:hover {
  background: rgba(255, 255, 255, 0.15);
}

.pwa-btn-install {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.pwa-btn-install:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.pwa-btn-install:active {
  transform: translateY(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .pwa-install-prompt {
    bottom: 80px; /* Move up to avoid bottom nav if present */
    width: calc(100% - 32px);
  }

  .pwa-install-content {
    padding: 16px;
  }

  .pwa-install-header {
    gap: 12px;
  }

  .pwa-install-header svg {
    width: 28px;
    height: 28px;
  }

  .pwa-install-header h3 {
    font-size: 15px;
  }

  .pwa-install-header p {
    font-size: 13px;
  }

  .pwa-install-actions {
    gap: 8px;
  }

  .pwa-btn-dismiss,
  .pwa-btn-install {
    padding: 10px 16px;
    font-size: 13px;
    min-width: 80px;
  }
}
/* ========================================
   LOGIN SCREEN
   Matches the platform's liquid-glass design
   ======================================== */
.login-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: #F5F5F7;
  background-image: var(--bg-primary);
  font-family: var(--font-ui);
}

/* Ambient accent glow behind the card */
.login-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.35;
}

.login-glow-one {
  width: 460px;
  height: 460px;
  top: -140px;
  left: -120px;
  background: radial-gradient(circle, #8E8E93 0%, rgba(142, 142, 147, 0) 70%);
}

.login-glow-two {
  width: 520px;
  height: 520px;
  bottom: -180px;
  right: -140px;
  background: radial-gradient(circle, #6E6E73 0%, rgba(110, 110, 115, 0) 70%);
}

/* Faint grid, echoing the chart surface */
.login-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

/* ========================================
   CARD
   ======================================== */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 40px 36px 28px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  text-align: center;
  animation: loginCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-mark {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2C2C2E 0%, #1D1D1F 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.login-title {
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #1D1D1F;
  margin: 0 0 8px;
}

.login-subtitle {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #48484A;
  margin: 0 0 28px;
}

/* ========================================
   ERROR BANNER
   ======================================== */
.login-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.2);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #C7261C;
}

.login-error svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--danger-red);
}

/* ========================================
   LOGIN BUTTON
   ======================================== */
.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(135deg, #2C2C2E 0%, #1D1D1F 100%);
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  filter: brightness(1.35);
}

.login-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.login-button svg {
  flex-shrink: 0;
}

.login-footer {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
  letter-spacing: 0.01em;
}

/* ========================================
   LOADING STATE
   ======================================== */
.login-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0 4px;
}

.login-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: #1D1D1F;
  animation: loginSpin 0.7s linear infinite;
}

@keyframes loginSpin {
  to {
    transform: rotate(360deg);
  }
}

.login-loading-text {
  font-size: 14px;
  font-weight: 500;
  color: #48484A;
}

/* ========================================
   DARK MODE
   ======================================== */
.login-screen.dark-mode {
  background: #0A0A0A;
  background-image: none;
}

.dark-mode .login-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.dark-mode .login-glow {
  opacity: 0.28;
}

.dark-mode .login-card {
  background: rgba(20, 20, 22, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark-mode .login-title {
  color: #FFFFFF;
}

.dark-mode .login-subtitle,
.dark-mode .login-loading-text {
  color: #A1A1A6;
}

/* Invert the mark and CTA so they stay legible on the dark card */
.dark-mode .login-mark {
  background: linear-gradient(135deg, #FFFFFF 0%, #D8D8DC 100%);
  color: #1D1D1F;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.dark-mode .login-button {
  background: linear-gradient(135deg, #FFFFFF 0%, #D8D8DC 100%);
  color: #1D1D1F;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.dark-mode .login-button:hover {
  filter: brightness(1.02);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.dark-mode .login-spinner {
  border-color: rgba(255, 255, 255, 0.16);
  border-top-color: #FFFFFF;
}

.dark-mode .login-error {
  background: rgba(255, 59, 48, 0.12);
  border-color: rgba(255, 59, 48, 0.28);
  color: #FF7A70;
}

.dark-mode .login-footer {
  color: #6E6E73;
}

/* ========================================
   MOBILE
   ======================================== */
@media (max-width: 480px) {
  .login-screen {
    padding: 16px;
  }

  .login-card {
    padding: 32px 24px 24px;
    border-radius: 20px;
  }

  .login-title {
    font-size: 24px;
  }

  .login-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .login-button {
    min-height: 50px;
  }
}

/* Short viewports (landscape phones): tighten the card */
@media (max-height: 620px) {
  .login-card {
    padding: 28px 24px 22px;
  }

  .login-subtitle {
    margin-bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card {
    animation: none;
  }

  .login-spinner {
    animation-duration: 1.6s;
  }

  .login-button:hover {
    transform: none;
  }
}