@font-face {
  font-family: 'Abang';
  src: url('/fonts/Abang.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  --bg:          #000000;
  --bg2:         #000000;
  --bg3:         #050505;
  --bg4:         #0c0c0e;
  --gate-bg:     linear-gradient(180deg, #011724 0%, #000000 100%);
  --border:      #16161a;
  --border2:     #282830;

  --call:        #ff7700;
  --call-dim:    rgba(255, 119, 0, 0.18);
  --put:         #8e8e93;
  --put-dim:     rgba(142, 142, 147, 0.18);

  --zero-line:   #ffd000;
  --zero-dim:    rgba(255, 208, 0, 0.15);
  --major-pos:   #ff7700;
  --major-neg:   #8e8e93;
  --spot-line:   #00d4ff;
  --spot-dim:    rgba(0, 212, 255, 0.22);

  --text1:  #f5f5f7;
  --text2:  #8e8e93;
  --text3:  #6e6e73;

  --green:  #34c759;
  --yellow: #ffcc00;
  --orange: #ff7700;
  --red:    #ff3b30;
  --cyan:   #00d4ff;

  --xaxis-h:   0px;

  --font-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", system-ui, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", system-ui, sans-serif;

  --radius: 6px;
  --transition: 150ms ease;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text1);
  font-family: var(--font-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }
canvas { display: block; }

/* ─── Top Row Layout (Sidebar left, Charts right) ────────────────────────── */
.app-top-row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  min-height: 0;
  width: 100vw;
  overflow: hidden;
}

/* ─── Metrics Sidebar (vertical sidebar on the left) ─────────────────────── */
.metrics-panel {
  width: 180px;
  height: calc(100% - 12px);
  margin: 12px 6px 0px 12px;
  background: rgba(10, 10, 14, 0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-width: 2.2px 1.5px 1.5px 2.2px;
  border-style: solid;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 1px 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 16px;
  flex-shrink: 0;
  z-index: 100;
  box-sizing: border-box;
  overflow-y: auto;
  align-items: stretch;
  animation: panel-fade-in 0.3s ease;
}

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

/* ── SPX Price block ── */
.metrics-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.metrics-symbol {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.metrics-status {
  display: flex;
  align-items: center;
  gap: 4px;
}

.market-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.market-dot.live   { background: var(--green); box-shadow: 0 0 5px var(--green); animation: pulse-green 2s infinite; }
.market-dot.closed { background: rgba(255,255,255,0.18); }

.market-label-live   { font-size: 11px; font-weight: 700; color: var(--green); }
.market-label-closed { font-size: 11px; font-weight: 700; color: #ffffff; }

/* Datetime */
.metrics-datetime {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text3);
  margin-top: -10px;
  margin-bottom: 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Main price row inside the sidebar */
.metrics-price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
}

.metrics-price {
  font-family: "JetBrains Mono", var(--font-mono), monospace;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
}

.metrics-change {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Sidebar divider */
.metrics-divider {
  display: none;
}

/* Grid of metrics in vertical stack */
.metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.metric-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  gap: 4px;
  position: relative;
}

.metric-cell:hover {
  background: rgba(255, 255, 255, 0.02);
}

.metric-label {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

.metric-val {
  font-family: "JetBrains Mono", var(--font-mono), monospace;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff !important;
  text-shadow: none !important;
  letter-spacing: -0.01em;
  text-align: center;
}
.metric-val--yellow { color: #ffffff !important; }
.metric-val--orange { color: #ffffff !important; }
.metric-val--gray { color: #ffffff !important; }
.metric-val--blue { color: #ffffff !important; }

.info-val, .info-change { color: rgba(255,255,255,0.85); }

/* Sidebar Flow Expand Plus Button */
.flow-expand-btn {
  border: none;
  background: transparent;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.flow-expand-btn:hover {
  color: #ffffff;
  transform: translateY(-50%) scale(1.25);
}

.flow-expand-btn:active {
  transform: translateY(-50%) scale(0.9);
}

/* Draggable Options Flow & Price Deltas Panel */
.flow-deltas-panel {
  position: absolute;
  left: 20px;
  top: 90px;
  width: 225px; /* Highly optimized narrow width */
  background: rgba(10, 10, 15, 0.45) !important; /* More transparent glass */
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.flow-deltas-panel.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.panel-drag-handle {
  padding: 6px 10px;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px 12px 0 0;
}

.panel-title {
  font-family: var(--font-sans);
  font-size: 12px; /* un filo più grandi */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panel-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.panel-close-btn:hover {
  color: #ffffff;
}

.panel-content {
  padding: 8px 10px 10px 10px;
}

.deltas-table {
  width: 100%;
  border-collapse: collapse;
}

.deltas-table th {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  font-size: 13px; /* un filo più grandi */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.deltas-table td {
  padding: 5px 2px; /* un filo più compatto */
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  font-size: 13px; /* un filo più grandi */
  font-weight: 600; /* Apple-style clean semi-bold numbers */
  color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.deltas-table tbody tr:last-child td {
  border-bottom: none;
}

/* Pos and Neg values - Sophisticated dark Apple-style colors */
.deltas-table td.pos-val {
  color: #2ea043 !important;
}
.deltas-table td.neg-val {
  color: #da3633 !important;
}

/* Row-level fading: 5m is brightest (opacity 1.0), 1h is darkest */
.deltas-table tbody tr[data-interval="5m"] td.pos-val,
.deltas-table tbody tr[data-interval="5m"] td.neg-val {
  opacity: 1.0;
}
.deltas-table tbody tr[data-interval="10m"] td.pos-val,
.deltas-table tbody tr[data-interval="10m"] td.neg-val {
  opacity: 0.82;
}
.deltas-table tbody tr[data-interval="15m"] td.pos-val,
.deltas-table tbody tr[data-interval="15m"] td.neg-val {
  opacity: 0.68;
}
.deltas-table tbody tr[data-interval="30m"] td.pos-val,
.deltas-table tbody tr[data-interval="30m"] td.neg-val {
  opacity: 0.54;
}
.deltas-table tbody tr[data-interval="1h"] td.pos-val,
.deltas-table tbody tr[data-interval="1h"] td.neg-val {
  opacity: 0.40;
}


/* ─── Right Area containing GEX and Volume Panels vertically stacked ─── */
.main-charts-area {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative; /* container for draggable absolute deltas panel */
}

.gex-chart-area {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 100%;
  flex-grow: 1;
  overflow: hidden;
}

/* X-axis (GEX scale header) */
.x-axis-wrapper {
  display: none;
  position: relative;
  border-bottom: none;
  overflow: hidden;
  background: transparent;
  height: 0;
  width: 100%;
}
#xAxisCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* GEX Ladder */
.gex-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
#gexCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* Expected Move & Decay Panel (full width bottom) ───────────────────────── */
.em-decay-wrapper {
  position: relative;
  border-top: 2px solid #141418;
  overflow: hidden;
  background: transparent;
  height: var(--em-panel-h, 240px);
  width: 100%;
  flex-shrink: 0;
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease;
}
.em-decay-charts-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.em-decay-chart-box {
  position: relative;
  width: 100%;
  flex: 1 1 0%;
  min-height: 0;
}
#em-decay-box {
  flex: 1 1 0%;
}
.em-decay-chart-box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* Volume & Delta Volume Indicators Wrapper ───────────────────────── */
.volume-indicators-wrapper {
  position: relative;
  border-top: 1px solid var(--border);
  overflow: hidden;
  background: transparent;
  height: var(--volume-panel-h, 160px);
  width: 100%;
  flex-shrink: 0;
}
.volume-charts-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.volume-chart-box {
  position: relative;
  width: 100%;
  flex: 1 1 0%;
  min-height: 0;
}
.volume-chart-box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.volume-splitter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  cursor: ns-resize;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: center;
}
.volume-splitter .splitter-handle {
  width: 40px;
  height: 3px;
  background: var(--border);
  border-radius: 1.5px;
  transition: background 0.2s, box-shadow 0.2s;
}
.volume-splitter:hover .splitter-handle,
.volume-splitter.active .splitter-handle {
  background: var(--spot);
  box-shadow: 0 0 8px var(--spot);
}

/* Premium Timeframe Zoom Controls (Floating Center Pill) */
.chart-controls-wrapper {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translate(-50%, 10px);
  z-index: 1010;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px 0;
}

.chart-controls-wrapper:hover {
  opacity: 1;
  transform: translate(-50%, 0);
}

.chart-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-width: 2.2px 1.5px 1.5px 2.2px;
  border-style: solid;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85);
  border-radius: 30px;
  padding: 6px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 1px 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text2);
  white-space: nowrap;
}

.chart-controls-row .premium-slider {
  width: 160px;
}

.chart-controls-row .control-label {
  color: #ffffff !important;
  text-transform: uppercase;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.chart-controls-row .zoom-value-label {
  color: #ffffff !important;
  min-width: 32px;
  text-align: right;
  font-size: 13px !important;
  font-weight: 700;
}


/* Expected Move & Decay Panel Splitter */
.chart-splitter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  cursor: ns-resize;
  background: transparent;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-splitter:hover, .chart-splitter.active {
  background: rgba(0, 212, 255, 0.08);
}
.splitter-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.15s, transform 0.15s;
}
.chart-splitter:hover .splitter-handle, .chart-splitter.active .splitter-handle {
  background: var(--cyan);
  transform: scaleY(1.2);
}

.demo-banner {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 200, 0, 0.15);
  border: 1px solid rgba(255, 200, 0, 0.35);
  color: var(--yellow);
  font-size: 11px;
  padding: 4px 14px;
  border-radius: 4px;
  pointer-events: none;
  letter-spacing: 0.03em;
}

/* ─── Loading overlay ─────────────────────────────────────────────────────── */
#loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
  overflow: hidden;
  background: rgba(10, 10, 15, 0.6) !important;
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
}
#loading-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 100%), url("/deepoptionback2342dc.png") no-repeat center center #000000 !important;
  background-size: cover !important;
  transform: scale(1.12);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#loading-overlay.glass::before {
  opacity: 0;
  display: none !important;
}
#loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  letter-spacing: -0.035em !important;
  line-height: 1.2 !important;
  user-select: none;
  animation: pulse-loading 2.0s infinite ease-in-out;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.2);
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
.loading-title-container .title-bold {
  font-family: 'Abang', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
}
.loading-title-container .title-v {
  font-family: 'Abang', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
  display: inline-block !important;
  margin-left: 0px; /* extremely subtle separation */
  -webkit-text-stroke: 0.4px #000000;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}
.loading-title-container .title-light {
  font-family: 'Belleza', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
  letter-spacing: 0.03em !important;
}
@keyframes pulse-loading {
  0% {
    opacity: 0.2;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.2;
    transform: scale(0.97);
  }
}

/* ─── Tooltip ────────────────────────────────────────────────────────────── */
#tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 14px;
  padding: 12px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif !important;
  font-size: 13px;
  color: #ffffff !important;
  pointer-events: none;
  z-index: 3000;
  display: none;
  line-height: 1.6;
  min-width: 190px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 15px rgba(255, 255, 255, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}
#tooltip.visible { display: block; }
#tooltip b { color: #ffffff !important; }

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
.gex-wrapper::-webkit-scrollbar { display: none; }

.timeline-controls-wrapper {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translate(-50%, 10px);
  z-index: 500;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px 0;
}

.timeline-controls-wrapper:hover {
  opacity: 1;
  transform: translate(-50%, 0);
}

.timeline-capsule {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.85) !important; /* Full black with glassmorphism opacity */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  /* Sleek 3D Glass Border matching the left vertical sidebar (.metrics-panel) */
  border-style: solid;
  border-width: 2.2px 1.5px 1.5px 2.2px;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85);
  border-radius: 30px;
  padding: 6px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 1px 1px 0 rgba(255, 255, 255, 0.05);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.control-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
}

.time-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 20px;
  color: var(--text2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  background: none;
}

.time-btn:hover {
  color: var(--text1);
  background: rgba(255, 255, 255, 0.06);
}

.time-btn.active {
  color: #000000 !important;
  background: var(--cyan);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

/* Specific style for LIVE active/inactive */
.time-btn[data-hour="live"].active {
  background: var(--green);
  box-shadow: 0 2px 10px rgba(52, 199, 89, 0.4);
  color: #000000 !important;
}

.live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  box-shadow: 0 0 4px currentColor;
}

/* Animations for pulsing when live but NOT active */
.time-btn[data-hour="live"]:not(.active) .live-pulse {
  color: var(--green);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { opacity: 0.3; }
  50% { opacity: 1; filter: drop-shadow(0 0 2px var(--green)); }
  100% { opacity: 0.3; }
}

/* ─── Timeline Scrubber ──────────────────────────────────────────────────── */
.timeline-scrubber {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
}

.scrubber-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  width: 48px;
  text-align: right;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

.scrubber-label.live-active {
  color: var(--green);
  text-shadow: 0 0 8px rgba(52, 199, 89, 0.3);
}

.premium-slider {
  -webkit-appearance: none;
  width: 250px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  transition: background 0.2s;
  cursor: pointer;
}

.premium-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 212, 255, 0.4);
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
}

.premium-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #ffffff;
}

.premium-slider:active::-webkit-slider-thumb {
  background: var(--cyan);
  transform: scale(1.3);
}

/* ─── Filter Section in Sidebar ────────────────────────────────────────── */
.filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.filter-select-label {
  font-size: 8px;
  font-weight: 700;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.premium-select {
  background: #121216;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 8px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.premium-select:hover {
  background: #181820;
  border-color: rgba(255, 255, 255, 0.15);
}

.premium-select:focus {
  border-color: var(--blue);
}

/* ─── Premium Checkbox ─────────────────────────────────────────────────── */
.premium-checkbox-container {
  display: block;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  transition: transform 0.15s ease;
}

.premium-checkbox-container input {
  display: none;
}

.premium-checkbox-checkmark {
  display: none !important;
}

.checkbox-label {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  font-size: 13.5px; /* larger Apple-style label size */
  font-weight: 500; /* Apple-style medium weight */
  color: #8e8e93; /* light gray / grigio chiaro */
  letter-spacing: -0.01em;
  transition: color 0.20s ease, text-shadow 0.20s ease;
}

.premium-checkbox-container input:checked ~ .checkbox-label {
  color: #ffffff; /* white / bianco */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.40); /* subtle glow */
}

.premium-checkbox-container:hover .checkbox-label {
  color: #d1d1d6; /* slightly lighter gray when hover on inactive */
}

.premium-checkbox-container input:checked:hover ~ .checkbox-label {
  color: #ffffff;
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.50);
}

/* ─── Heatmap Lens Selector ─── */
#heatmap-lens-selector span {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  transition: color 0.15s ease, text-shadow 0.15s ease;
  user-select: none;
}
#heatmap-lens-selector span[id^="lens-btn-"]:hover {
  color: #ffffff !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* ─── Custom Time Picker ──────────────────────────────────────────────── */
.custom-time-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  animation: fade-in 0.2s ease;
}

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

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

.custom-time-row .filter-select-label {
  min-width: 22px;
  text-align: right;
}

.premium-time-input {
  background: #121216;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 6px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  flex: 1;
  box-sizing: border-box;
  color-scheme: dark;
}

.premium-time-input:hover {
  background: #181820;
  border-color: rgba(255, 255, 255, 0.15);
}

.premium-time-input:focus {
  border-color: var(--cyan);
}

.custom-time-apply-btn {
  margin-top: 2px;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 4px;
  color: var(--cyan);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 0;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.custom-time-apply-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  border-color: rgba(0, 212, 255, 0.4);
}

.custom-time-apply-btn:active {
  background: rgba(0, 212, 255, 0.3);
  transform: scale(0.98);
}

/* ─── Alert Section ───────────────────────────────────────────────────── */
.alert-section {
  gap: 6px;
}

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

/* Premium iOS-style Toggle Switch */
.premium-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: background 0.3s, box-shadow 0.3s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.premium-toggle-switch input:checked + .toggle-slider {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

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

/* ─── Dedicated Alert Toggle Switch (AVVISI LIVE) ────────────────────────── */
.custom-alert-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.custom-alert-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.custom-alert-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #121216 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.custom-alert-knob {
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background-color: #ffffff !important;
  border: 2px solid #000000 !important; /* Bold black border for visibility when OFF */
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  transform: translateX(0);
  box-shadow: none !important;
}

.custom-alert-switch input:checked + .custom-alert-slider {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

.custom-alert-switch input:checked + .custom-alert-slider .custom-alert-knob {
  transform: translateX(20px) !important; /* Perfect align: 38px total - 14px knob width - 4px margin = 20px travel distance */
  background-color: #ffffff !important;
  border-color: #000000 !important; /* Black border when active/ON as well */
  box-shadow: none !important;
}

/* Alert Container */
.alert-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fade-in 0.2s ease;
}

.alert-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.alert-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.alert-status-dot.scanning {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse-green 2s infinite;
}

.alert-status-dot.off {
  background: rgba(255, 255, 255, 0.15);
}

.alert-status-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text3);
}

.alert-status-label.scanning {
  color: var(--green);
}

/* Alert List */
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.alert-list::-webkit-scrollbar {
  width: 3px;
}
.alert-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.alert-empty {
  font-size: 9px;
  font-weight: 500;
  color: var(--text3);
  text-align: center;
  padding: 8px 0;
  font-style: italic;
}

/* Individual Alert Card (Tactile 3D Glass Tab) */
.alert-card {
  position: relative;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 8px;
  margin-bottom: 4px;
  animation: alert-slide-in 0.3s ease;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  background-repeat: no-repeat !important;
  background-position: -32px center !important;
  background-size: 110px 75px !important;
  overflow: hidden;
}

.alert-card.bullish {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'><defs><linearGradient id='dots-green-grad' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='rgba(0,50,15,0.7)'/><stop offset='100%' stop-color='rgba(0,230,118,0.85)'/></linearGradient><pattern id='dots-green-pat' width='6' height='6' patternUnits='userSpaceOnUse'><circle cx='3' cy='3' r='1.5' fill='%23ffffff'/></pattern><mask id='mask-green'><rect width='100%' height='100%' fill='url(%23dots-green-pat)'/></mask></defs><path d='M5,25 h75 v-20 l35,35 l-35,35 v-20 h-75 z' fill='url(%23dots-green-grad)' mask='url(%23mask-green)'/></svg>") !important;
}

.alert-card.bearish {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'><defs><linearGradient id='dots-red-grad' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='rgba(70,10,12,0.7)'/><stop offset='100%' stop-color='rgba(255,23,68,0.85)'/></linearGradient><pattern id='dots-red-pat' width='6' height='6' patternUnits='userSpaceOnUse'><circle cx='3' cy='3' r='1.5' fill='%23ffffff'/></pattern><mask id='mask-red'><rect width='100%' height='100%' fill='url(%23dots-red-pat)'/></mask></defs><path d='M5,25 h75 v-20 l35,35 l-35,35 v-20 h-75 z' fill='url(%23dots-red-grad)' mask='url(%23mask-red)'/></svg>") !important;
}

@keyframes alert-slide-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alert-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  transform: scale(1.02);
}

.alert-card.new-alert {
  animation: alert-pulse 1.5s ease 2;
}

@keyframes alert-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 12px rgba(0, 212, 255, 0.2); }
}

.alert-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.alert-pattern-name {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--cyan);
}

.alert-direction {
  font-size: 10px;
  font-weight: 800;
}

.alert-direction.bullish { color: var(--green); }
.alert-direction.bearish { color: var(--red); }

.alert-time {
  font-size: 8px;
  font-weight: 600;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}

.alert-confluences {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}

.alert-confluence-item {
  font-size: 8px;
  font-weight: 600;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.alert-confluence-item::before {
  color: var(--cyan);
  font-weight: 800;
  font-size: 10px;
}

/* ─── Premium Date Select and Playback Controls ────────────────────────── */
.premium-date-select {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px 0 4px;
  outline: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  height: 28px;
  box-sizing: border-box;
  opacity: 0.85;
}
.premium-date-select:hover {
  opacity: 1;
  color: #ffffff !important;
  transform: scale(1.06);
}

/* ─── Custom 3D Glass Date Picker Dropdown Menu (Compact Floating Above) ── */
.custom-date-picker-menu {
  position: fixed !important;
  width: 182px !important;
  height: 220px !important;
  max-height: 230px !important;
  background: rgba(10, 12, 16, 0.95) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.88), inset 1px 1px 0 rgba(255, 255, 255, 0.08) !important;
  padding: 6px 5px !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.custom-date-picker-menu::-webkit-scrollbar {
  width: 4px;
}
.custom-date-picker-menu::-webkit-scrollbar-track {
  background: transparent;
}
.custom-date-picker-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
.custom-date-picker-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
.custom-date-picker-header {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.05em;
  padding: 4px 6px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 3px;
  flex-shrink: 0;
}
.custom-date-item {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.custom-date-item .date-pct-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 159, 10, 0.18);
  color: #ff9f0a;
  border: 1px solid rgba(255, 159, 10, 0.35);
  letter-spacing: 0.02em;
}
.custom-date-item.active .date-pct-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.custom-date-item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.custom-date-item.active {
  background: #007aff !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.45);
}
.playback-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px;
}
.playback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  font-size: 17px;
  opacity: 0.85;
}
.playback-btn:hover {
  opacity: 1;
  color: #ffffff !important;
  transform: scale(1.18);
}
.playback-btn:active {
  transform: scale(0.90);
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinning {
  animation: spin 0.8s linear infinite !important;
  pointer-events: none;
  opacity: 0.5;
}
.premium-speed-select {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px 0 4px;
  outline: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  height: 28px;
  box-sizing: border-box;
  opacity: 0.85;
}
.premium-speed-select:hover {
  opacity: 1;
  color: #ffffff !important;
  transform: scale(1.06);
}

/* Sidebar characters styling override (pure Apple style) */
.metrics-panel,
.metrics-panel * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", system-ui, -webkit-system-font, sans-serif !important;
}

/* BBtest2 Logiche Button Styling (Simple White Text Link) */
#bb-logiche-btn,
#sidebar-guide-btn {
  cursor: pointer;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  transition: opacity 0.2s, color 0.2s;
  text-transform: uppercase;
  display: inline-block;
  opacity: 0.7;
}

#bb-logiche-btn:hover,
#sidebar-guide-btn:hover {
  opacity: 1;
  text-decoration: underline;
}

#bb-logiche-btn:active,
#sidebar-guide-btn:active {
  opacity: 0.8;
}

#reset-settings-btn {
  cursor: pointer;
  color: #ff453a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  transition: opacity 0.2s, color 0.2s;
  text-transform: uppercase;
  display: inline-block;
  opacity: 0.7;
}

#reset-settings-btn:hover {
  opacity: 1;
  text-decoration: underline;
}

#reset-settings-btn:active {
  opacity: 0.8;
}

/* Sidebar Bottom Toggle Button (Expected Move) */
.sidebar-bottom-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--text1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Compact", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
  margin-bottom: 4px;
}

.sidebar-bottom-toggle-btn:hover {
  transform: scale(1.03) translateY(-0.5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.sidebar-bottom-toggle-btn:active {
  transform: scale(0.97) translateY(0);
}

.sidebar-bottom-toggle-btn .indicator-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zero-line);
  box-shadow: 0 0 10px rgba(255, 208, 0, 0.7);
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  margin-right: 8px;
}

.sidebar-bottom-toggle-btn .btn-text {
  flex-grow: 1;
  text-align: left;
  font-weight: 700;
}

.sidebar-bottom-toggle-btn .btn-arrow {
  font-size: 9px;
  color: var(--text3);
  margin-left: 6px;
  transition: transform 0.2s;
}


/* ─── Sidebar Collapse / Expand ──────────────────────────────────────────── */

/* Collapse button (‹) inside the metrics-header */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, color 0.15s ease;
  margin-left: 8px;
  padding: 0;
  opacity: 0.75;
}
.sidebar-collapse-btn:hover {
  background: transparent;
  color: #ffffff;
  opacity: 1;
  transform: scale(1.15);
}
.sidebar-collapse-btn:active {
  transform: scale(0.90);
}

/* Collapsed state: slide the panel out with a smooth transition */
.metrics-panel {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease,
              padding 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.6s ease;
}
.metrics-panel.collapsed {
  width: 0 !important;
  padding: 0 !important;
  margin: 12px 0 0px 0 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-color: transparent !important;
}

/* Floating reopen button (›) — hidden by default, visible when collapsed */
.sidebar-reopen-btn {
  position: fixed;
  top: 36px; /* Positioned higher up, matching the horizontal header */
  left: 0;
  transform: translateX(-100%);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; /* Smaller width */
  height: 44px; /* Smaller height */
  border-radius: 0 6px 6px 0; /* Sleek rounded right corners */
  border: 1px solid rgba(255, 255, 255, 0.22) !important; /* Whiter, more visible border */
  border-left: none !important;
  background: #16161c !important; /* Premium dark background */
  color: #ffffff !important; /* Pure white arrow */
  font-size: 16px !important; /* Smaller arrow size */
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.15s, border-color 0.15s, color 0.15s;
}
.sidebar-reopen-btn.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}
.sidebar-reopen-btn:hover {
  background: #20202a !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #00d4ff !important; /* Premium cyan hover state */
}
.sidebar-reopen-btn:active {
  transform: translateX(0) scale(0.94) !important;
}

/* ─── Horizontal Trading Desk Top Navigation Bar ────────────────────────────── */
.desk-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: #0d0e12 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  user-select: none;
}

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

.desk-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.desk-divider {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.22);
  margin: 0 2px;
  user-select: none;
}

.desk-tab, .style-tab, .favorites-tab, .lock-label, .auto-label, .desk-hedge-title {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-transform: uppercase;
}

.desk-tab:hover, .style-tab:hover, .favorites-tab:hover, .desk-action-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.desk-tab.active, .style-tab.active, .favorites-tab.active {
  color: #ffffff !important;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.desk-action-btn {
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
}

.desk-bar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.desk-bar-right {
  display: flex;
  align-items: center;
  width: 440px;
  justify-content: space-around;
  margin-right: -16px;
}

.desk-hedge-title {
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.favorites-tab-bar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  transform: none !important;
}

/* Bottom Panel Collapse / Expand styles */
.em-decay-wrapper {
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease,
              border-top-color 0.28s;
}
.em-decay-wrapper.collapsed {
  height: 0 !important;
  opacity: 0;
  pointer-events: none;
  border-top-color: transparent;
}

.bottom-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
  margin-left: 6px;
  padding: 0 0 2px 0;
  opacity: 0.85;
}
.bottom-collapse-btn:hover {
  opacity: 1;
  color: #ffffff !important;
  transform: scale(1.18);
}
.bottom-collapse-btn:active {
  transform: scale(0.90);
}

.bottom-reopen-btn {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 20px;
  border-radius: 6px 6px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  background: #131318;
  color: var(--text3);
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.15s, color 0.15s;
}
.bottom-reopen-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.bottom-reopen-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text1);
}
.bottom-reopen-btn:active {
  transform: translateX(-50%) translateY(0) scale(0.94);
}

.page-title-header {
  position: absolute;
  bottom: 42px; /* Anchored above the time axis */
  left: 80px;  /* Anchored inside the GEX chart area (ML = 68px) */
  z-index: 999;
  display: flex;
  align-items: center;
  pointer-events: auto;
  cursor: default;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 24px;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  user-select: none;
  opacity: 0.95; /* Watermark look */
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 8px rgba(255, 255, 255, 0.2);
  background: transparent;
  padding: 6px 14px;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  transition: font-size 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}

/* Make title watermark smaller and less invasive when the bottom Greeks/Expected Move panel is open */
body:not(:has(#em-decay-wrapper.collapsed)) .page-title-header {
  font-size: 17px !important;
}

.page-title-header .title-bold {
  font-family: 'Abang', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
}

.page-title-header .title-v {
  font-family: 'Abang', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
  display: inline-block !important;
  margin-left: 0px; /* separation between GAMMA and V */
  -webkit-text-stroke: 0.3px #000000; /* make V un-bold/thinner */
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

.page-title-header .title-light {
  font-family: 'Belleza', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
  letter-spacing: 0.03em !important;
}

/* Toast Notification System (Top-Left next to Sidebar and vertical scale) */
.toast-container {
  position: fixed;
  top: 20px;
  left: 260px; /* Shifted left: 260px to sit immediately after the vertical price scale strikes when sidebar is open */
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* Let clicks pass through background */
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* Syncs perfectly with metrics-panel transition */
}

/* Sidebar is collapsed (closed) -> slide toasts to the left */
.metrics-panel.collapsed ~ .toast-container {
  left: 80px; /* 68px scale strikes + 12px margin (since sidebar width is now 0) */
}

.toast-notification {
  pointer-events: auto; /* Allow closing or hovering */
  position: relative; /* Enabled for absolute close button positioning */
  min-width: 250px;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 12px;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  background: rgba(0, 0, 0, 0.85) !important;
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  transform: translateX(-40px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif !important;
  box-sizing: border-box;
  background-repeat: no-repeat !important;
  background-position: -48px center !important;
  background-size: 150px 100px !important;
  overflow: hidden;
}

.toast-notification.toast-show {
  transform: translateX(0);
  opacity: 1;
}

.toast-notification.toast-hide {
  transform: translateX(-20px);
  opacity: 0;
}

/* Premium Black Close Circle Button with White X (Larger & Apple Thin Style) */
.toast-close-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000000;
  border: 1.2px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif !important;
  font-size: 13px;
  font-weight: 300; /* Apple-style thin cross font styling */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 1px 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.85);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
  pointer-events: auto;
  z-index: 10;
}

.toast-close-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: scale(1.12);
}

.toast-close-btn:active {
  transform: scale(0.92);
}

/* Toast direction glass color schemes (Thicker on top/left, thinner on bottom/right) */
.toast-up {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'><defs><linearGradient id='dots-up-grad' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='rgba(0,50,15,0.7)'/><stop offset='100%' stop-color='rgba(0,230,118,0.85)'/></linearGradient><pattern id='dots-up-pat' width='6' height='6' patternUnits='userSpaceOnUse'><circle cx='3' cy='3' r='1.5' fill='%23ffffff'/></pattern><mask id='mask-up'><rect width='100%' height='100%' fill='url(%23dots-up-pat)'/></mask></defs><path d='M5,25 h75 v-20 l35,35 l-35,35 v-20 h-75 z' fill='url(%23dots-up-grad)' mask='url(%23mask-up)'/></svg>") !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 230, 118, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

.toast-down {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'><defs><linearGradient id='dots-down-grad' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='rgba(70,10,12,0.7)'/><stop offset='100%' stop-color='rgba(255,23,68,0.85)'/></linearGradient><pattern id='dots-down-pat' width='6' height='6' patternUnits='userSpaceOnUse'><circle cx='3' cy='3' r='1.5' fill='%23ffffff'/></pattern><mask id='mask-down'><rect width='100%' height='100%' fill='url(%23dots-down-pat)'/></mask></defs><path d='M5,25 h75 v-20 l35,35 l-35,35 v-20 h-75 z' fill='url(%23dots-down-grad)' mask='url(%23mask-down)'/></svg>") !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 12px rgba(255, 23, 68, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

.toast-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.toast-grid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.3;
}

.toast-grid-label {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff; /* White labels */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 65px;
  flex-shrink: 0;
}

.toast-grid-value {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Dynamic data coloration */
.toast-up .toast-val-price {
  color: #00e676; /* Green for UP alerts */
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
}

.toast-down .toast-val-price {
  color: #ff1744; /* Red for DOWN alerts */
  text-shadow: 0 0 8px rgba(255, 23, 68, 0.4);
}

.toast-val-volume {
  color: #00d4ff; /* Cyan for volume values */
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

.toast-grid-subvalue {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-left: 6px;
}

/* ─── Access Gate (Lock Screen) ────────────────────────────────────────── */
.access-gate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999; /* Absolute top priority overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.access-gate-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.91) 0%, rgba(0, 0, 0, 0.45) 100%), url("/deepoptionback2342dc.png") no-repeat center center #000000 !important;
  background-size: cover !important;
  transform: scale(1.12);
  z-index: -1;
  pointer-events: none;
}

.access-gate-overlay.fade-out {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

.access-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  width: 90%;
  text-align: center;
  animation: accessGateFadeIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.access-gate-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 38px;
  letter-spacing: -0.035em !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  user-select: none;
  margin-bottom: 8px;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.2);
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.access-gate-logo .title-bold {
  font-family: 'Abang', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
}

.access-gate-logo .title-v {
  font-family: 'Abang', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
  display: inline-block !important;
  margin-left: 0px; /* slightly larger for big logo */
  -webkit-text-stroke: 0.4px #000000; /* make V un-bold/thinner */
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

.access-gate-logo .title-light {
  font-family: 'Belleza', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
  letter-spacing: 0.03em !important;
}

.logiche-title-logo .title-bold {
  font-family: 'Abang', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
}
.logiche-title-logo .title-v {
  font-family: 'Abang', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
  display: inline-block !important;
  margin-left: 0px; /* extremely subtle separation */
  -webkit-text-stroke: 0.32px #000000;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}
.logiche-title-logo .title-light {
  font-family: 'Belleza', sans-serif !important;
  font-weight: normal !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
  letter-spacing: 0.03em !important;
}

.access-gate-subtitle {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 450 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 32px !important;
  line-height: 1.6;
}

.access-gate-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Apple-style Premium Input Wrapper */
.access-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: #09090b;
  border-radius: 12px;
  padding: 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  /* Sleek 3D Glass Border style like metrics-panel */
  border-style: solid;
  border-width: 2.2px 1.5px 1.5px 2.2px;
  border-color: rgba(100, 100, 110, 0.25) rgba(35, 35, 40, 0.25) rgba(35, 35, 40, 0.25) rgba(100, 100, 110, 0.25);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.access-input-wrapper:focus-within {
  /* Glowing modern slate dark gray 3D glass border on focus */
  border-color: rgba(140, 140, 152, 0.8) rgba(60, 60, 65, 0.8) rgba(60, 60, 65, 0.8) rgba(140, 140, 152, 0.8) !important;
  box-shadow: 0 0 20px rgba(140, 140, 152, 0.25), 0 8px 32px rgba(0, 0, 0, 0.9) !important;
}

.access-input-wrapper input {
  flex-grow: 1;
  border: none;
  background: transparent;
  color: #ffffff;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 14px !important;
  font-weight: 500;
  padding: 12px 16px;
  outline: none;
  text-align: center;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.access-input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.22) !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Unlock button styled as text only, below the input tab */
.access-gate-text-btn {
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  padding: 8px 16px;
  margin-top: 12px;
  transition: color var(--transition), opacity var(--transition);
  outline: none;
}

.access-gate-text-btn:hover {
  color: #ffffff !important;
}

.access-gate-text-btn:active {
  opacity: 0.8;
}

.access-gate-error {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffd000 !important;
  letter-spacing: 0.08em !important;
  margin-top: 16px;
  text-transform: uppercase !important;
  text-shadow: 0 0 8px rgba(255, 208, 0, 0.35);
  animation: accessGateShake 400ms ease;
}

@keyframes accessGateShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ─── Greeks Tab Bar ────────────────────────────────────────────────────────── */
.greeks-tab-bar {
  display: none !important;
  top: 8px;
  left: calc(50% + 99px); /* Aligned with visual center of the main chart area (ML 198px / MR 0px) */
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 24px;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  height: 28px;
}

/* Adjust alignment if sidebar is collapsed */
.app-top-row:has(.metrics-panel.collapsed) ~ .em-decay-wrapper .greeks-tab-bar {
  left: 50%; /* Aligned with visual center when sidebar is collapsed (ML 0px / MR 0px) */
}

.greeks-tab {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0 14px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: var(--text2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

.greeks-tab:hover {
  color: var(--text1);
  background: rgba(255, 255, 255, 0.06);
}

.greeks-tab.active {
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
}




/* Sidebar Indicator Row */
.sidebar-indicator-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 0;
  width: 100%;
}

.sidebar-indicator-row label {
  margin: 0;
  flex: 1;
}

.favorite-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
}

.favorite-toggle-btn::before {
  content: "+";
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.favorite-toggle-btn:hover::before {
  transform: scale(1.25);
}

.favorite-toggle-btn.active::before {
  content: "\2715"; /* thin cross */
  font-size: 12px;
}

/* TWS IBKR 3D Glass Button */
.ibkr-3d-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 20px;
  height: 30px;
  line-height: 30px;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Compact", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  padding: 0 14px;
}

.ibkr-3d-btn:hover {
  transform: scale(1.03) translateY(-0.5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  background: rgba(20, 20, 25, 0.9) !important;
}

.ibkr-3d-btn:active {
  transform: scale(0.97) translateY(0);
}

.ibkr-3d-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Indicators Dropdown Button & Panel styles */
.indicators-dropdown-panel {
  position: static;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 !important;
  margin-top: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, margin-top 0.28s ease;
}

.indicators-dropdown-panel.visible {
  max-height: 480px;
  opacity: 1;
  margin-top: 8px;
  overflow-y: auto;
}

.dropdown-header {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 6px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 4px;
}

.dropdown-scroll-container {
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.dropdown-scroll-container::-webkit-scrollbar {
  display: none;
}

/* Row Styling in Dropdown List */
.indicators-dropdown-panel .sidebar-indicator-row {
  border-radius: 6px;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: none;
  box-sizing: border-box;
}

.indicators-dropdown-panel .sidebar-indicator-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.indicators-dropdown-panel .checkbox-label {
  font-size: 11.5px;
}

/* Interactive Onboarding Guide Overlay */
.guide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 1.2s ease, backdrop-filter 1.2s ease, -webkit-backdrop-filter 1.2s ease;
}

.guide-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.guide-card {
  position: relative;
  width: 380px;
  background: rgba(10, 10, 15, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card.floating {
  position: fixed !important;
  z-index: 100001;
  margin: 0 !important;
  transform: none !important;
  transition: top 1.5s cubic-bezier(0.25, 1, 0.5, 1), left 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.guide-overlay.visible .guide-card {
  transform: scale(1);
}

.guide-overlay.visible .guide-card.floating {
  transform: none !important;
}

.guide-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 14px;
  transition: color 0.15s;
  padding: 4px;
}

.guide-close-btn:hover {
  color: #ffffff;
}

.guide-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.guide-text {
  font-size: 15px;
  color: #ffffff !important;
  line-height: 1.5;
  font-family: var(--font-sans);
}

.guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.guide-dots {
  display: flex;
  gap: 6px;
}

.guide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.2s, transform 0.2s;
}

.guide-dot.active {
  background: #ffffff;
  transform: scale(1.2);
}

.guide-next-btn {
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 20px;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.15s, transform 0.15s;
}

.guide-next-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.05);
}

.guide-next-btn:active {
  transform: scale(0.95);
}

/* Onboarding Focus Highlight class */
.guide-highlight {
  outline: 2.5px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.4) !important;
  pointer-events: none !important;
  transition: outline 0.3s, box-shadow 0.3s;
}

/* Force show timeline controls if highlighted */
.timeline-controls-wrapper:has(.guide-highlight) {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.guide-cursor {
  position: fixed;
  z-index: 100002;
  pointer-events: none;
  transition: top 1.5s cubic-bezier(0.25, 1, 0.5, 1), left 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
}

.guide-overlay.no-overlay-blur {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}



/* Real-time Apple-Style black 3D Event Log Overlay (svasata/sunken) */
.mmex-event-log-content {
  overflow-y: auto;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  font-size: 13px;
}

/* Custom premium scrollbar for the event log */
.mmex-event-log-content::-webkit-scrollbar {
  width: 5px;
}
.mmex-event-log-content::-webkit-scrollbar-track {
  background: transparent;
}
.mmex-event-log-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}
.mmex-event-log-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.mmex-event-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 7px 0;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  white-space: normal;
  word-break: break-word;
  font-size: 13px;
  letter-spacing: -0.01em;
  transition: opacity 0.25s ease, font-weight 0.25s ease;
}

.mmex-event-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* ─── Chart Style Switcher (LINE/CANDLE) ────────────────────────────────────── */
.chart-style-switcher {
  position: absolute;
  top: 12px;
  left: 132px; /* Past the asset tabs */
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 24px;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  height: 28px;
}

.style-tab {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0 12px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: var(--text2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.style-tab:hover {
  color: var(--text1);
  background: rgba(255, 255, 255, 0.06);
}

.style-tab.active {
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* ─── 3D Glass Templates Drawer & Color Customizer ────────────────────────── */
.templates-drawer-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding: 10px;
  background: rgba(12, 14, 18, 0.94) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-width: 2.2px 1.5px 1.5px 2.2px !important;
  border-style: solid !important;
  border-color: rgba(125, 125, 135, 0.85) rgba(40, 40, 45, 0.85) rgba(40, 40, 45, 0.85) rgba(125, 125, 135, 0.85) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), inset 1px 1px 0 rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.templates-section-title {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.saved-templates-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.saved-template-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.saved-template-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.saved-template-pill.active {
  background: rgba(0, 122, 255, 0.25) !important;
  border-color: #007aff !important;
  box-shadow: 0 0 10px rgba(0, 122, 255, 0.4);
}

.template-pill-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
  flex: 1;
}

.template-delete-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s ease;
}

.template-delete-btn:hover {
  color: #ff3b30 !important;
}

.templates-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.color-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.color-picker-row:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

.color-row-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.color-preview-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Color Popover Sub-Panel */
.template-color-popover {
  background: rgba(8, 10, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px;
  margin-top: 4px;
}

.popover-title {
  font-size: 10px;
  font-weight: 700;
  color: #007aff;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-align: center;
}

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

.swatch {
  height: 18px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.1s ease;
}

.swatch:hover {
  transform: scale(1.18);
  border-color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.popover-native-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.popover-native-picker-row input[type="color"] {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.opacity-slider-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opacity-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.opacity-slider-container input[type="range"] {
  width: 100%;
  accent-color: #007aff;
  cursor: pointer;
}

.save-template-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.template-name-input {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #ffffff;
  font-size: 11px;
  padding: 6px 10px;
  outline: none;
}

.template-name-input:focus {
  border-color: #007aff;
}

.save-template-btn {
  background: #007aff;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  padding: 7px 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.save-template-btn:hover {
  background: #0056b3;
}