/* =============================================================================
   premium.css — Trading Rabbit · v2 full redesign
   Built 2026-05-02. Single source of visual truth.

   Strategy: aggressive Tailwind override layer. The dashboard.js render
   output uses Tailwind utility classes (bg-amber-400, bg-blue-100, etc.)
   inline. We override every utility class that conflicts with the new
   light + bright design. JS markup stays untouched — only the visual
   layer changes.
   ========================================================================== */

/* =============================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --bg:           #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f8f9fa;
  --surface-3:    #f1f3f5;
  --surface-4:    #e9ecef;

  --ink:          #0c1117;
  --ink-2:        #2a3540;
  --ink-3:        #5a6776;
  --muted:        #8a96a3;
  --muted-2:      #b5bdc6;

  --bg-2:         #f1f3f5;
  --rule:         #0c1117;
  --hairline:     #e8ebef;
  --hairline-2:   #d4d9df;
  --border:       #e8ebef;
  --border-2:     #d4d9df;

  /* Up — bright traffic-light green (primary now uses brighter shade) */
  --up:           #22c55e;     /* bright green primary */
  --up-2:         #16a34a;     /* darker for emphasis text */
  --up-strong:    #16a34a;
  --up-bright:    #00d63a;     /* electric green for high-emphasis */
  --up-bg:        #d1fae5;     /* very light green wash */
  --up-bg-2:      #a7f3d0;     /* mid-light green for strong rows */

  /* Down — bright traffic-light red */
  --down:         #ef4444;     /* bright red primary */
  --down-2:       #dc2626;     /* darker for emphasis text */
  --down-strong:  #dc2626;
  --down-bright:  #ff3344;     /* electric red */
  --down-bg:      #fee2e2;
  --down-bg-2:    #fecaca;

  --accent:       #ec4899;
  --accent-2:     #db2777;
  --accent-bg:    #fce7f3;
  --brand-from:   #a855f7;
  --brand-to:     #ec4899;

  --blue:         #2563eb;
  --blue-bg:      #dbeafe;

  --font-data:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --t-fast: 120ms;
  --ease:   cubic-bezier(.2,.7,.3,1);
}

/* =============================================================================
   2. BASE RESET — light surface, mono numbers
   ========================================================================== */
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.mono, code, kbd { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--muted-2); border: 2px solid var(--surface-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::selection { background: var(--accent-bg); color: var(--ink); }

/* =============================================================================
   3. TR TOPBAR — replaces the old fixed topbar markup
   The new HTML uses <header class="tr-topbar"> — but if old markup is still
   present (body > div.fixed.top-0), neutralize it so it doesn't double-render.
   ========================================================================== */
body > div.fixed.top-0.z-50.w-full {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: 56px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 20px 0 16px !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 16px !important;
}

/* Keep old topbar children aligned for the working brand+nav we'll add */
body > div.fixed.top-0.z-50.w-full > div { gap: 16px; align-items: center; }

/* Hide the old absolute-centered "Interval | 1 hour" pill — replaced by topbar-center */
body > div.fixed.top-0 .absolute.left-1\/2 { display: none !important; }

.tr-topbar {
  display: flex; align-items: stretch;
  height: 56px;
  padding: 0 20px 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 16px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
}

.brand-link {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; padding: 0 8px;
  flex-shrink: 0;
}
.brand-link:hover { text-decoration: none; }
.brand-link:hover .brand-mark { transform: rotate(-4deg); }
.brand-mark { width: 32px; height: 32px; display: block; flex-shrink: 0; transition: transform 200ms var(--ease); }
.brand-text { display: inline-flex; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.brand-text .t { color: var(--ink); }
.brand-text .r {
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 2px;
}
/* Real logo image — full Trading Rabbit horizontal logo */
.brand-img {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: transform 200ms var(--ease);
}
.brand-link:hover .brand-img { transform: rotate(-2deg) scale(1.02); }

/* Header nav — kept byte-for-byte in step with .nav in css/v3.css.
   The two stylesheets dress different pages, but the header is the one
   element every page shares, so it must not change shape as you move
   between them. Metrics, colours, easing and the underline behaviour below
   are the v3 values; only the topbar HEIGHT stays at this page's 56px,
   because the old layouts compute their main area from it. */
.tr-topbar .primary-nav { display: flex; align-items: stretch; height: 100%; margin-left: 16px; }
.tr-topbar .nav-link {
  display: inline-flex; align-items: center;
  height: 100%; padding: 0 14px;
  font-size: 12px; font-weight: 500;
  letter-spacing: -0.005em;
  color: #68747F;                       /* v3 --ink-lo */
  position: relative;
  transition: color 180ms cubic-bezier(.20,.70,.30,1);
  text-decoration: none;
}
.tr-topbar .nav-link::after {
  content: ""; position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 260ms cubic-bezier(.16,1,.3,1);
}
.tr-topbar .nav-link:hover { color: #0B1016; text-decoration: none; }
.tr-topbar .nav-link:hover::after { transform: scaleX(.4); }
.tr-topbar .nav-link.is-active { color: #0B1016; font-weight: 600; }
.tr-topbar .nav-link.is-active::after { transform: scaleX(1); }
.tr-topbar .nav-divider {
  width: 1px; height: 22px;
  background: var(--border-2);
  align-self: center; margin: 0 12px;
}

.tr-topbar .topbar-center { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tr-topbar .topbar-right  { display: flex; align-items: center; gap: 12px; }

.dev-link {
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  font-family: var(--font-data); font-size: 11px; font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.dev-link:hover { color: var(--ink); border-color: var(--ink-3); text-decoration: none; }
.dev-link.is-active { color: var(--ink); border-color: var(--accent); }
.dev-link::before { content: "dev/"; color: var(--muted-2); }

/* =============================================================================
   4. PROFILE BUTTON + DROPDOWN — overrides the existing markup
   ========================================================================== */
#profileButton {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 10px 4px 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  height: auto !important; width: auto !important;
  cursor: pointer;
}
#profileButton:hover {
  border-color: var(--border-2) !important;
  background: var(--surface-3) !important;
}
#profileButton > div:first-child {
  width: 28px !important; height: 28px !important;
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to)) !important;
  color: white !important;
  display: grid !important; place-items: center !important;
  font-size: 11px !important; font-weight: 700 !important;
  border-radius: 999px !important;
  font-family: var(--font-data) !important;
}
#profileButton > div:first-child .rounded-full { background: transparent !important; }
#profileButton #userInitials { color: white; font-weight: 700; }
#profileButton #userEmailShort {
  font-size: 12px !important; color: var(--ink-2) !important;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-data);
}
#dropdownIcon { color: var(--muted) !important; font-size: 18px !important; }

#profileMenu {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(12,17,23,.10) !important;
  overflow: hidden;
  margin-top: 8px !important;
}
#profileMenu .p-4:first-child { background: var(--ink) !important; }
#profileMenu .p-4 .text-white { color: white !important; }
#profileMenu .p-4 .text-white\/80 { color: rgba(255,255,255,.7) !important; }
#profileMenu .p-4 .rounded-full {
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to)) !important;
}
#profileMenu .bg-slate-50 { background: var(--surface-2) !important; }
#profileMenu .border-slate-100 { border-color: var(--border) !important; }
#profileMenu .text-slate-500 { color: var(--muted) !important; }
#profileMenu .text-slate-700 { color: var(--ink-2) !important; }
#profileMenu .text-slate-400 { color: var(--muted-2) !important; }
#profileMenu .text-emerald-600 { color: var(--up) !important; }
#profileMenu .bg-emerald-500 { background: var(--up-bright) !important; }
#profileMenu button:hover { background: var(--surface-3) !important; }
#profileMenu button:hover.hover\:bg-red-50,
#profileMenu button.group:hover { background: var(--down-bg) !important; }
#profileMenu button.group:hover .group-hover\:text-red-600 { color: var(--down) !important; }
#profileMenu button.group:hover .group-hover\:text-red-700 { color: var(--down-2) !important; }
#profileMenu .h-px.bg-slate-200 { background: var(--border) !important; }

/* =============================================================================
   5. STATUS BAR — dark with bright signal colors
   ========================================================================== */
.status-bar {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: var(--ink) !important;
  color: var(--surface-3) !important;
  font-family: var(--font-data) !important;
  font-size: 11px !important;
  height: 26px !important;
  border-top: none !important;
  padding: 0 16px !important;
  position: fixed !important;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  font-variant-numeric: tabular-nums;
}
.status-bar .sb-item { display: inline-flex; align-items: center; gap: 6px; }
.status-bar .sb-key  { color: var(--muted) !important; }
.status-bar .sb-val  { color: var(--surface) !important; font-weight: 500 !important; }
.status-bar .sb-dot  {
  display: inline-block !important;
  width: 7px !important; height: 7px !important;
  border-radius: 999px !important;
  background: var(--up-bright) !important;
  animation: live-pulse 2.4s var(--ease) infinite;
}
.live-dot {
  background: var(--up-bright) !important;
  animation: live-pulse 2.4s var(--ease) infinite;
}
@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  50%     { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* =============================================================================
   6. MAIN LAYOUT — adjust for new 56px topbar + 26px status bar
   ========================================================================== */
body main, body > main {
  margin-top: 56px !important;
  height: calc(100vh - 56px - 26px) !important;
}
#dashboard-container { margin-top: 56px !important; height: calc(100vh - 56px - 26px) !important; }

#left-panel, #right-panel,
#opt-left-panel, #opt-right-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
#left-panel { border-right: 0 !important; }
/* Allow the view-mode + direction toggle row to peek out below the chart */
#left-panel { overflow: visible !important; }
#left-panel #percent-change-chart { overflow: hidden; }

/* The chart canvas mount point must stay light. The chart.js sometimes
   re-renders after a state update — make sure no parent forces black. */
#percent-change-chart {
  background: var(--surface) !important;
  position: relative;
}
#percent-change-chart canvas {
  background: var(--surface) !important;
}
/* Prevent any prefers-color-scheme dark from forcing black on the canvas */
@media (prefers-color-scheme: dark) {
  #left-panel, #percent-change-chart, #percent-change-chart canvas {
    background: var(--surface) !important;
    color-scheme: light !important;
  }
}
html, body { color-scheme: light !important; }

/* Resizable divider */
#divider {
  width: 6px !important;
  background: var(--surface-2) !important;
  position: relative !important;
  cursor: col-resize !important;
  flex-shrink: 0 !important;
  transition: background var(--t-fast);
}
#divider > div {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 2px !important; height: 28px !important;
  background: var(--border-2) !important;
  border-radius: 2px !important;
  transition: background var(--t-fast);
}
#divider:hover { background: var(--accent-bg) !important; }
#divider:hover > div { background: var(--accent) !important; }

/* =============================================================================
   7. CHART FILTER BUTTONS
   ========================================================================== */
.chart-filter-btn {
  padding: 5px 12px !important;
  font-size: 11px !important; font-weight: 500 !important;
  color: var(--ink-3) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 0 !important;
  font-family: var(--font-data) !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  transition: all var(--t-fast);
}
.chart-filter-btn:hover {
  background: var(--surface-3) !important;
  color: var(--ink) !important;
  border-color: var(--ink-3) !important;
}
.chart-filter-btn.active {
  background: var(--ink) !important;
  color: white !important;
  border-color: var(--ink) !important;
}

/* =============================================================================
   8. ZOOM STRIP
   ========================================================================== */
.zoom-strip {
  display: inline-flex;
  border: 1px solid var(--border-2);
  background: var(--surface-3);
  height: 28px;
  border-radius: 3px;
  padding: 2px;
  align-items: stretch;
}
.zoom-strip button {
  min-width: 28px; padding: 0 7px;
  font-family: var(--font-data); font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none; border-radius: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.zoom-strip button:hover { background: var(--surface); color: var(--ink); }
.zoom-strip .z-sep { width: 1px; background: var(--border-2); margin: 4px 1px; }
.zoom-strip #zoom-reset { color: var(--accent); font-size: 12px; }

/* =============================================================================
   9. RANKED GRID — AGGRESSIVE TAILWIND OVERRIDES
   The dashboard.js render emits cells with bg-amber-*, bg-blue-*,
   text-amber-*, text-blue-* etc. We override every one to map to brand
   tokens for the new design.
   ========================================================================== */
#ranked-grid { background: var(--surface) !important; padding: 0 !important; }

/* The grid header (sticky top) — LIGHT THEME (was dark ink) */
.ranked-grid-container.text-xs.font-semibold {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border-2) !important;
  box-shadow: none !important;
  color: var(--ink-2) !important;
  font-family: var(--font-data) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ranked-grid-container.text-xs.font-semibold > div {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--ink-3) !important;
}
/* CALL 1 / CALL 2 / CALL 3 group headers — soft pink / neutral / soft green */
.ranked-grid-container.text-xs.font-semibold .bg-amber-400 {
  background: var(--accent-bg) !important;
  color: var(--accent-2) !important;
  border-color: var(--accent) !important;
}
.ranked-grid-container.text-xs.font-semibold .bg-blue-100 {
  background: var(--up-bg) !important;
  color: var(--up-2) !important;
}
.ranked-grid-container.text-xs.font-semibold .bg-gray-100 {
  background: var(--surface-3) !important;
  color: var(--ink-2) !important;
}
.ranked-grid-container.text-xs.font-semibold .bg-amber-50,
.ranked-grid-container.text-xs.font-semibold .bg-amber-100 {
  background: transparent !important;
  color: var(--ink-3) !important;
}
.ranked-grid-container.text-xs.font-semibold .bg-gray-50 {
  background: var(--surface-2) !important;
  color: var(--ink-3) !important;
}
.ranked-grid-container.text-xs.font-semibold .text-green-700,
.ranked-grid-container.text-xs.font-semibold .text-green-600 {
  color: var(--up-2) !important;
}
.ranked-grid-container.text-xs.font-semibold .text-red-700,
.ranked-grid-container.text-xs.font-semibold .text-red-600 {
  color: var(--down-2) !important;
}
.ranked-grid-container.text-xs.font-semibold .text-blue-600 {
  color: var(--up-2) !important;
}
.ranked-grid-container.text-xs.font-semibold .border-amber-200,
.ranked-grid-container.text-xs.font-semibold .border-amber-300,
.ranked-grid-container.text-xs.font-semibold .border-gray-200,
.ranked-grid-container.text-xs.font-semibold .border-gray-300 {
  border-color: var(--border) !important;
}
.ranked-grid-container.text-xs.font-semibold .material-symbols-outlined {
  color: var(--ink-3) !important;
}

/* Body rows — neutralize all amber/blue cell backgrounds */
.ranked-grid-container:not(.text-xs.font-semibold) {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  position: relative;
  transition: background var(--t-fast);
}
.ranked-grid-container:not(.text-xs.font-semibold):hover {
  background: var(--surface-3) !important;
}
.ranked-grid-container:not(.text-xs.font-semibold) > div {
  border-color: var(--border) !important;
}
/* Even-row stripe override */
.ranked-grid-container.bg-gray-50 { background: var(--surface-2) !important; }
.ranked-grid-container.bg-white   { background: var(--surface) !important; }

/* CALL 1 cell backgrounds (dashboard.js: bg-amber-50, bg-amber-100/60) */
.ranked-grid-container .bg-amber-50,
.ranked-grid-container [class*="bg-amber-100"] {
  background: rgba(236,72,153,.04) !important;
}
/* CALL 3 cell backgrounds (bg-blue-50, bg-blue-100/60) */
.ranked-grid-container .bg-blue-50,
.ranked-grid-container [class*="bg-blue-100"] {
  background: rgba(34,197,94,.05) !important;
}

/* Trend arrows in symbol cell */
.ranked-grid-container .text-green-600 { color: var(--up) !important; }
.ranked-grid-container .text-red-600   { color: var(--down) !important; }
.ranked-grid-container .text-green-700 { color: var(--up-2) !important; }
.ranked-grid-container .text-red-700   { color: var(--down-2) !important; }
.ranked-grid-container .text-gray-700, .ranked-grid-container .text-gray-800 { color: var(--ink) !important; }
.ranked-grid-container .text-gray-500 { color: var(--muted) !important; }
.ranked-grid-container .text-gray-400 { color: var(--muted-2) !important; }
.ranked-grid-container .text-white    { color: white !important; }

/* Percent badge pills (bg-green-100 / bg-red-100 in renderSymbolRow) */
.ranked-grid-container .bg-green-100 { background: var(--up-bg) !important; }
.ranked-grid-container .bg-red-100   { background: var(--down-bg) !important; }

/* Rank cell — was bg-amber-50 / bg-blue-50 */
.ranked-grid-container .bg-blue-50 { background: var(--accent-bg) !important; }

/* Rank badges */
.rank-gold   { color: #d97706 !important; font-weight: 700 !important; }
.rank-silver { color: #6b7280 !important; font-weight: 700 !important; }
.rank-bronze { color: #b45309 !important; font-weight: 700 !important; }

.text-blue-700 { color: var(--accent-2) !important; }

/* =============================================================================
   10. STRONG SIGNAL ROWS — full row solid color, dark readable text, no rounding
   The entire row is tinted (--up-bg-2 / --down-bg-2). Every cell inside has a
   transparent background so the row tint shows through. Text is bold dark
   green/red so it remains readable.
   ========================================================================== */
.ranked-grid-container.strong-row-buy,
.ranked-grid-container.strong-row-buy.bg-white,
.ranked-grid-container.strong-row-buy.bg-gray-50 {
  background: var(--up-bg-2) !important;
  box-shadow: inset 5px 0 0 0 var(--up-2), inset 0 -1px 0 0 var(--up-2) !important;
  border-radius: 0 !important;
}
.ranked-grid-container.strong-row-buy > div,
.ranked-grid-container.strong-row-buy > div[class*="bg-amber"],
.ranked-grid-container.strong-row-buy > div[class*="bg-blue"],
.ranked-grid-container.strong-row-buy > div[class*="bg-gray"] {
  background: transparent !important;
  border-radius: 0 !important;
  border-color: rgba(21,128,61,.18) !important;
}
.ranked-grid-container.strong-row-buy .text-gray-800,
.ranked-grid-container.strong-row-buy .text-gray-700,
.ranked-grid-container.strong-row-buy .text-green-600,
.ranked-grid-container.strong-row-buy .text-green-700,
.ranked-grid-container.strong-row-buy .text-red-600,
.ranked-grid-container.strong-row-buy .text-red-700 {
  color: var(--up-2) !important;
  font-weight: 700 !important;
}
.ranked-grid-container.strong-row-buy .text-gray-500,
.ranked-grid-container.strong-row-buy .text-gray-400 {
  color: var(--up-2) !important;
  opacity: 0.7;
}
.ranked-grid-container.strong-row-buy .bg-green-500 {
  background: var(--up-2) !important; color: white !important; border-radius: 0 !important;
}
.ranked-grid-container.strong-row-buy .bg-red-500 {
  background: var(--down) !important; color: white !important; border-radius: 0 !important;
}
.ranked-grid-container.strong-row-buy .bg-green-100,
.ranked-grid-container.strong-row-buy .bg-red-100 {
  background: transparent !important;
}
.ranked-grid-container.strong-row-buy [style*="background-color: #38CB6E"] {
  background-color: var(--up-2) !important; color: white !important;
}
.ranked-grid-container.strong-row-buy [style*="color: #38CB6E"] { color: var(--up-2) !important; }
.ranked-grid-container.strong-row-buy [style*="color: #F15656"] { color: var(--down-2) !important; }
.ranked-grid-container.strong-row-buy .pin-toggle-btn { color: var(--up-2) !important; opacity: 0.7; }
.ranked-grid-container.strong-row-buy .pin-toggle-btn.pinned,
.ranked-grid-container.strong-row-buy .pin-toggle-btn:hover { opacity: 1; }

.ranked-grid-container.strong-row-sell,
.ranked-grid-container.strong-row-sell.bg-white,
.ranked-grid-container.strong-row-sell.bg-gray-50 {
  background: var(--down-bg-2) !important;
  box-shadow: inset 5px 0 0 0 var(--down-2), inset 0 -1px 0 0 var(--down-2) !important;
  border-radius: 0 !important;
}
.ranked-grid-container.strong-row-sell > div,
.ranked-grid-container.strong-row-sell > div[class*="bg-amber"],
.ranked-grid-container.strong-row-sell > div[class*="bg-blue"],
.ranked-grid-container.strong-row-sell > div[class*="bg-gray"] {
  background: transparent !important;
  border-radius: 0 !important;
  border-color: rgba(185,28,28,.18) !important;
}
.ranked-grid-container.strong-row-sell .text-gray-800,
.ranked-grid-container.strong-row-sell .text-gray-700,
.ranked-grid-container.strong-row-sell .text-green-600,
.ranked-grid-container.strong-row-sell .text-green-700,
.ranked-grid-container.strong-row-sell .text-red-600,
.ranked-grid-container.strong-row-sell .text-red-700 {
  color: var(--down-2) !important;
  font-weight: 700 !important;
}
.ranked-grid-container.strong-row-sell .text-gray-500,
.ranked-grid-container.strong-row-sell .text-gray-400 {
  color: var(--down-2) !important;
  opacity: 0.7;
}
.ranked-grid-container.strong-row-sell .bg-green-500 {
  background: var(--up) !important; color: white !important; border-radius: 0 !important;
}
.ranked-grid-container.strong-row-sell .bg-red-500 {
  background: var(--down-2) !important; color: white !important; border-radius: 0 !important;
}
.ranked-grid-container.strong-row-sell .bg-green-100,
.ranked-grid-container.strong-row-sell .bg-red-100 {
  background: transparent !important;
}
.ranked-grid-container.strong-row-sell [style*="background-color: #F15656"] {
  background-color: var(--down-2) !important; color: white !important;
}
.ranked-grid-container.strong-row-sell [style*="color: #38CB6E"] { color: var(--up-2) !important; }
.ranked-grid-container.strong-row-sell [style*="color: #F15656"] { color: var(--down-2) !important; }
.ranked-grid-container.strong-row-sell .pin-toggle-btn { color: var(--down-2) !important; opacity: 0.7; }
.ranked-grid-container.strong-row-sell .pin-toggle-btn.pinned,
.ranked-grid-container.strong-row-sell .pin-toggle-btn:hover { opacity: 1; }

/* The "STRONG" badge inside the symbol cell — keep vivid */
.ranked-grid-container.strong-row-buy .strong-badge {
  background: var(--up-2) !important; color: white !important; border-radius: 0 !important;
}
.ranked-grid-container.strong-row-sell .strong-badge {
  background: var(--down-2) !important; color: white !important; border-radius: 0 !important;
}

.strong-badge {
  display: inline-flex; align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.08em;
  font-family: var(--font-data);
  border-radius: 3px;
  color: white;
}
.strong-badge.badge-buy  { background: var(--up); }
.strong-badge.badge-sell { background: var(--down); }

/* =============================================================================
   11. FLASH + STATIC + HIGHLIGHT ANIMATIONS
   ========================================================================== */
.flash-green  { background-color: var(--up-bg-2) !important; color: var(--up-2) !important; }
.flash-red    { background-color: var(--down-bg-2) !important; color: var(--down-2) !important; }
.static-green { background-color: var(--up-bg) !important; color: var(--up-2) !important; }
.static-red   { background-color: var(--down-bg) !important; color: var(--down-2) !important; }

.has-tooltip { cursor: help; position: relative; }
.has-tooltip:hover { color: var(--ink); }
.has-tooltip .tooltip {
  background: var(--ink) !important;
  color: white !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--font-data) !important;
  font-size: 11px !important;
  border-radius: 3px !important;
  pointer-events: none;
  white-space: nowrap;
}

.highlight-signal { animation: hl-fade 12s ease-out 1; }
@keyframes hl-fade {
  0%   { background-color: rgba(236,72,153,.30); }
  50%  { background-color: rgba(34,197,94,.20); }
  100% { background-color: transparent; }
}
.long-term-highlight { animation: lt-flash 1s ease-out 3; }
@keyframes lt-flash {
  0%,100% { background-color: transparent; }
  50%     { background-color: rgba(245,158,11,.55); }
}

/* =============================================================================
   12. PIN COLUMN + DRAG STATES
   ========================================================================== */
.pin-toggle-btn {
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--muted-2);
  transition: color var(--t-fast), transform var(--t-fast);
}
.pin-toggle-btn:hover { color: var(--accent); transform: scale(1.1); }
.pin-toggle-btn.pinned { color: var(--accent); }
.pin-toggle-btn .material-symbols-outlined { font-size: 18px !important; }

.pinned-row {
  background: rgba(236,72,153,.06) !important;
  box-shadow: inset 3px 0 0 0 var(--accent) !important;
}
.pinned-row.dragging {
  opacity: 0.6 !important;
  transform: scale(0.98) rotate(2deg) !important;
  box-shadow: 0 4px 12px rgba(236,72,153,.25), inset 3px 0 0 0 var(--accent) !important;
  z-index: 10;
}
.pinned-row.drag-over {
  box-shadow: inset 0 -3px 0 0 var(--accent), inset 3px 0 0 0 var(--accent) !important;
}
.drag-handle { cursor: grab; color: var(--muted-2) !important; }
.drag-handle:hover { color: var(--accent) !important; }

/* =============================================================================
   13. BUY/SELL COUNTER CIRCLES (inline-styled via getCounterClass)
   We override the inline background-color via [style*=...] selectors.
   ========================================================================== */
.ranked-grid-container [style*="background-color: #38CB6E"] {
  background-color: var(--up) !important;
}
.ranked-grid-container [style*="background-color: #F15656"] {
  background-color: var(--down) !important;
}
/* Diamond character color override */
.ranked-grid-container [style*="color: #38CB6E"] { color: var(--up) !important; }
.ranked-grid-container [style*="color: #F15656"] { color: var(--down) !important; }

/* GO! / STOP! cells (bg-green-500 / bg-red-500) */
.ranked-grid-container .bg-green-500 {
  background: var(--up) !important;
  color: white !important;
  font-family: var(--font-data) !important;
  letter-spacing: 0.04em;
}
.ranked-grid-container .bg-red-500 {
  background: var(--down) !important;
  color: white !important;
  font-family: var(--font-data) !important;
  letter-spacing: 0.04em;
}

/* =============================================================================
   14. PAGE 2 — Group A / Group B headers
   ========================================================================== */
#dashboard-container .bg-slate-700 {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--border);
  padding: 8px 12px !important;
}
#dashboard-container .bg-indigo-700 {
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to)) !important;
  padding: 8px 12px !important;
}
#dashboard-container .bg-slate-700 h2,
#dashboard-container .bg-indigo-700 h2 {
  color: white !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0;
}
#dashboard-container .text-emerald-400 {
  color: var(--up-bright) !important;
  font-family: var(--font-data) !important;
  font-size: 11px !important;
}

#grid-left, #grid-right {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 6px 6px;
}

/* =============================================================================
   15. CONTROL BUTTONS (Stop / Pause)
   ========================================================================== */
.control-btn {
  padding: 5px 10px !important;
  font-size: 11px !important; font-weight: 600 !important;
  font-family: var(--font-data) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 3px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all var(--t-fast);
}
.control-btn:hover { background: var(--surface-3) !important; border-color: var(--ink) !important; }
.control-btn.btn-pause   { background: var(--accent-bg) !important; color: var(--accent-2) !important; border-color: var(--accent) !important; }
.control-btn.btn-resume  { background: var(--up-bg) !important; color: var(--up-2) !important; border-color: var(--up) !important; }

/* =============================================================================
   16. OPTIONS PAGE — chip-style dots, clean ranked list
   ========================================================================== */
#opt-left-panel, #opt-right-panel { display: flex; flex-direction: column; }

.opt-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.opt-section-head {
  padding: 6px 16px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.opt-section-title { color: var(--ink-2); }
.opt-calls .opt-section-title { color: var(--up-2); }
.opt-puts  .opt-section-title { color: var(--down-2); }
.opt-section-meta { font-family: var(--font-data); color: var(--muted); }

/* ── PINNED CHIPS in the section header ─────────────────────────────────
   Permanent NIFTY + BANKNIFTY display next to the "Calls"/"Puts" title.
   They're always visible regardless of score or sell state. Click opens
   TradingView; hover shows the tooltip.                                */
.opt-section-pinned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  flex: 1;
}
.opt-pinned-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.opt-pinned-chip:hover {
  background: var(--surface-3);
  border-color: var(--ink);
}
.opt-pinned-chip.is-empty {
  opacity: 0.5;
  cursor: default;
}
.opt-pinned-label { letter-spacing: 0.04em; }
.opt-pinned-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--ink);
  color: #fff;
  border-radius: 3px;
  font-size: 10px;
}
.opt-pinned-chip.opt-heat-mid  .opt-pinned-score { background: #15803d; }
.opt-pinned-chip.opt-heat-high .opt-pinned-score { background: #16a34a; }
.opt-puts .opt-pinned-chip.opt-heat-mid  .opt-pinned-score { background: #b91c1c; }
.opt-puts .opt-pinned-chip.opt-heat-high .opt-pinned-score { background: #dc2626; }

/* Gold (trendline-signal) treatment for pinned NIFTY/BANKNIFTY chips —
   matches the bright-green/red pulsing golden glow used on rows in the
   right-side list and chips in the dot grid. Same keyframes
   (tl-gold-buy-glow / tl-gold-sell-glow) so the animation is identical. */
.opt-pinned-chip.is-gold-buy {
  background: #16a34a !important;
  border: 2px solid #fbbf24 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  animation: tl-gold-buy-glow 0.6s ease-in-out infinite alternate !important;
}
.opt-pinned-chip.is-gold-sell {
  background: #dc2626 !important;
  border: 2px solid #fbbf24 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  animation: tl-gold-sell-glow 0.6s ease-in-out infinite alternate !important;
}
.opt-pinned-chip.is-gold-buy  .opt-pinned-label,
.opt-pinned-chip.is-gold-sell .opt-pinned-label {
  color: #ffffff !important;
  font-weight: 900 !important;
}
.opt-pinned-chip.is-gold-buy  .opt-pinned-score,
.opt-pinned-chip.is-gold-sell .opt-pinned-score {
  background: #fbbf24 !important;
  color: #422006 !important;
  font-weight: 900 !important;
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .opt-pinned-chip.is-gold-buy,
  .opt-pinned-chip.is-gold-sell {
    animation: none !important;
  }
}
.opt-mid-rule { background: var(--ink); height: 2px; }

.opt-rows { flex: 1; padding: 8px 12px; overflow-y: auto; }
.opt-row-strip {
  display: grid; grid-template-columns: 28px 1fr 36px;
  align-items: flex-start; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-family: var(--font-data); font-size: 11px;
  /* Row grows vertically as chips wrap — no fixed height cap. */
  min-height: 36px;
}
.opt-row-rank { color: var(--muted); text-align: center; font-weight: 700; padding-top: 4px; }
.opt-row-track {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-width: 0;          /* allow grid cell to shrink so flex wrapping kicks in */
  align-content: flex-start;
}
.opt-row-dots {
  display: flex; flex-wrap: wrap; gap: 6px;
  width: 100%;
}
.opt-row-count { color: var(--muted); text-align: right; padding-top: 4px; }
/* Defensive: hide any +N overflow chip that might be injected by older code. */
.opt-overflow-chip { display: none !important; }

/* Dots → LABELED chips. Symbol text is always visible (no hover required).
   Right side carries the buy-score number. Heat tier shifts the bg/border
   from neutral → light green → blinking green as confluence rises. */
.opt-dot {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 3px 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 4px !important;
  cursor: pointer;
  font-family: var(--font-data);
  font-size: 11px; font-weight: 700;
  color: var(--ink) !important;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
  width: auto !important; height: auto !important;
  line-height: 1.1;
}
.opt-dot::before { content: none !important; }
.opt-dot:hover { transform: translateY(-1px); text-decoration: none; border-color: var(--ink) !important; }
.opt-dot-label { color: inherit; }
.opt-dot-score {
  font-family: var(--font-data); font-size: 10px; font-weight: 800;
  padding: 1px 5px; border-radius: 3px;
  background: var(--surface-3); color: var(--ink-2);
}
.opt-dot-call { border-color: var(--up) !important; }
.opt-dot-put  { border-color: var(--down) !important; }
.opt-dot-flag { box-shadow: 0 0 0 2px rgba(34,197,94,.30); }
.opt-dot-hidden { display: none; }

/* HEAT TIERS — CE and PE share the same GREEN colour scheme.
   ─ mid    (4 buys)         bright tint, no blink
   ─ high   (5+ buys)        brighter + 1.0s blink
   ─ prime  (Long + 4+ buys) GOLD border + 0.8s blink (max attention)
*/

/* ── MID (4 buys) — solid bright tint, no animation ─────────────────────── */
.opt-heat-mid {
  background: #bbf7d0 !important;          /* green-200 */
  border-color: var(--up-2) !important;
  color: #052e16 !important;
  font-weight: 800 !important;
}
.opt-heat-mid .opt-dot-score { background: var(--up); color: white; font-weight: 800; }

/* ── HIGH (5+ buys) — bright tint + blink ───────────────────────────────── */
.opt-heat-high {
  background: #86efac !important;          /* green-300 */
  border-color: #15803d !important;
  color: #052e16 !important;
  font-weight: 800 !important;
  animation: opt-blink-green 1.0s var(--ease) infinite;
}
.opt-heat-high .opt-dot-score { background: #15803d; color: white; font-weight: 800; }
@keyframes opt-blink-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.65); background-color: #86efac; }
  50%     { box-shadow: 0 0 0 6px rgba(22,163,74,0); background-color: #4ade80; }
}

/* Make all heat-tier text dark + bold inside the right list */
.opt-row.opt-heat-mid .opt-col-symbol,
.opt-row.opt-heat-mid .opt-col-strike,
.opt-row.opt-heat-mid .opt-col-vol,
.opt-row.opt-heat-mid .opt-score-num,
.opt-row.opt-heat-high .opt-col-symbol,
.opt-row.opt-heat-high .opt-col-strike,
.opt-row.opt-heat-high .opt-col-vol,
.opt-row.opt-heat-high .opt-score-num {
  color: inherit !important;
  font-weight: 800 !important;
}

/* PRIME tier removed — the Long-driven gold-border tier was retired
   when the dual-timeframe (15m / 1h) dot column replaced the single
   Long badge. Heat tiers are now just `mid` and `high`. */

/* ── FRESH (newly-active, < 15 min, low confluence) ─ slow green pulse ─ */
.opt-fresh {
  animation: opt-fresh-pulse 2.4s var(--ease) infinite;
}
.opt-row.opt-fresh {
  animation: opt-fresh-row 2.4s var(--ease) infinite;
}
@keyframes opt-fresh-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.0);  border-color: var(--up); }
  50%     { box-shadow: 0 0 0 4px rgba(34,197,94,.30); border-color: var(--up-2); }
}
@keyframes opt-fresh-row {
  0%,100% { box-shadow: inset 3px 0 0 0 rgba(34,197,94,.30); }
  50%     { box-shadow: inset 3px 0 0 0 var(--up-2); }
}

@media (prefers-reduced-motion: reduce) {
  .opt-fresh, .opt-row.opt-fresh,
  .opt-heat-high,
  .opt-row.opt-heat-high {
    animation: none !important;
  }
}

/* ── ENCRYPTED INDICATOR CIPHERS (tooltip) ──────────────────────────────
   Visual codes only — no indicator names visible. Six cells in a row;
   each shows the current state of one slot. */
.opt-tip-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  font-family: var(--font-data);
}
.opt-cipher {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 22px;
  padding: 0 6px;
  font-family: var(--font-data);
  font-size: 11px; font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 3px !important;
  background: var(--surface);
}
/* SuperTrend / EMA+ZLS — text labels coloured by state */
.opt-cipher.c-super.s-buy,
.opt-cipher.c-zls.s-buy   { color: var(--up-2); border-color: var(--up); background: var(--up-bg); }
.opt-cipher.c-super.s-sell,
.opt-cipher.c-zls.s-sell  { color: var(--down-2); border-color: var(--down); background: var(--down-bg); }
.opt-cipher.c-super.s-neutral,
.opt-cipher.c-zls.s-neutral { color: var(--muted); }

/* Excavo triangle */
.opt-cipher.c-excavo.s-buy     { color: var(--up); border-color: var(--up); font-size: 14px; }
.opt-cipher.c-excavo.s-sell    { color: var(--down); border-color: var(--down); font-size: 14px; }
.opt-cipher.c-excavo.s-neutral { color: var(--muted); }

/* GAO arrow */
.opt-cipher.c-gao.s-buy  { color: var(--up); border-color: var(--up); font-size: 14px; font-weight: 900; }
.opt-cipher.c-gao.s-sell { color: var(--down); border-color: var(--down); font-size: 14px; font-weight: 900; }
.opt-cipher.c-gao.s-neutral { color: var(--muted); }

/* RF + ISC: black dot for buy, maroon dot for sell, hollow ring otherwise */
.opt-cipher.c-rfisc.s-buy  { color: #0c1117; border-color: #0c1117; font-size: 14px; }    /* black */
.opt-cipher.c-rfisc.s-sell { color: #800000; border-color: #800000; font-size: 14px; }    /* maroon */
.opt-cipher.c-rfisc.s-neutral { color: var(--muted); }

/* RSI ≥78 — gold when triggered */
.opt-cipher.c-rsi.s-buy  { color: #92400e; border-color: #fbbf24; background: #fef3c7; font-weight: 800; }
.opt-cipher.c-rsi.s-neutral { color: var(--muted); }

/* Trendline (7th indicator) — buy/sell render the rabbit favicon
   inside the cipher cell. Different border colors tell them apart. */
.opt-cipher.c-trend.s-buy  {
  border-color: #fbbf24;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
}
.opt-cipher.c-trend.s-sell {
  border-color: #b91c1c;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
}
.opt-cipher.c-trend.s-neutral { color: var(--muted); }
.opt-cipher.c-trend.s-buy img,
.opt-cipher.c-trend.s-sell img {
  display: block;
  border-radius: 50%;
}

/* 🐰 brand mark on contracts that have an active trendline signal.
   Wraps an inline SVG (RabbitIcon.svg(...)). The SVG silhouette uses
   currentColor so it picks up gold (#fbbf24) from this wrapper.
   Pulse + hover-scale grab the eye. */
/* Rabbit indicator — uses the project's actual favicon PNG (the
   kawaii Trading Rabbit on a pink/purple gradient circle). The
   image is its own self-contained badge, so no color management
   here — just sizing, animation, and a soft glow. */
.opt-rabbit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 4px;
  filter: drop-shadow(0 0 4px rgba(251,191,36,0.85));
  animation: rabbit-pulse 1.2s ease-in-out infinite alternate;
  transition: transform 0.18s ease;
  cursor: help;
}
.opt-rabbit:hover {
  transform: scale(1.5);
  filter: drop-shadow(0 0 8px rgba(253,224,71,1));
}
.opt-rabbit-svg {
  display: inline-block;
  border-radius: 50%;
}
.opt-rabbit-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 3px;
  filter: drop-shadow(0 0 2px rgba(251,191,36,0.7));
}
@keyframes rabbit-pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 3px rgba(251,191,36,0.7)); }
  100% { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(253,224,71,1))
                                                drop-shadow(0 0 14px rgba(251,191,36,0.7)); }
}

/* Rabbit prefix inside dot-grid chips and the section-pinned chips —
   inherits the inline-text 🐰 from the JS render. We pump up its size
   selectively here so it stands out within the chip. */
.opt-dot.is-gold-buy  .opt-dot-label,
.opt-dot.is-gold-sell .opt-dot-label,
.opt-pinned-chip.is-gold-buy  .opt-pinned-label,
.opt-pinned-chip.is-gold-sell .opt-pinned-label {
  font-size: 13px;
}

/* Hover indicator — floating rabbit-vector badge that appears at the
   top-right of any gold (trendline-active) row, chip, or pinned chip
   when the cursor is over it. Uses an inline SVG via data-URI so we
   can render the proper 2D rabbit (not the emoji). */
.opt-row.is-gold-buy:hover::after,
.opt-row.is-gold-sell:hover::after,
.opt-dot.is-gold-buy:hover::after,
.opt-dot.is-gold-sell:hover::after,
.opt-pinned-chip.is-gold-buy:hover::after,
.opt-pinned-chip.is-gold-sell:hover::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  background-image: url("/assets/favicon.png");
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(253,224,71,1));
  animation: rabbit-pulse 0.9s ease-in-out infinite alternate;
  z-index: 10;
}
.opt-row.is-gold-buy, .opt-row.is-gold-sell,
.opt-dot.is-gold-buy, .opt-dot.is-gold-sell,
.opt-pinned-chip.is-gold-buy, .opt-pinned-chip.is-gold-sell {
  position: relative;
}

/* Tooltip — prominent trendline banner at the very top when the
   trendline indicator is buy/sell-active. Big rabbit + bold label,
   pulsing background. Visually communicates: "this contract is hot." */
.opt-tip-trend-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 2px solid #fbbf24;
}
.opt-tip-trend-banner.is-buy {
  background: #16a34a;
  animation: tl-gold-buy-glow 0.6s ease-in-out infinite alternate;
}
.opt-tip-trend-banner.is-sell {
  background: #dc2626;
  animation: tl-gold-sell-glow 0.6s ease-in-out infinite alternate;
}
.opt-tip-trend-rabbit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 4px rgba(253,224,71,1));
  animation: rabbit-pulse 0.9s ease-in-out infinite alternate;
}
.opt-tip-trend-rabbit img { display: block; border-radius: 50%; }
.opt-tip-trend-text {
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .opt-rabbit,
  .opt-tip-trend-banner,
  .opt-tip-trend-rabbit {
    animation: none !important;
  }
}

/* =============================================================================
   SELL TOAST DOCK — slim horizontal bar pinned to the very bottom of the page.
   Toasts flow left-to-right. New ones append on the right; when the bar is
   full (MAX_TOASTS), the oldest on the left is dropped to make room.
   Each toast is small — symbol + tiny time stamp — and never blocks the UI.
   Auto-dismiss after 5 minutes. Hover shows the × close button.
   ========================================================================== */
.opt-sell-toast-stack {
  position: fixed;
  left: 0; right: 0;
  bottom: 26px;             /* sits flush above the 26px status bar */
  z-index: 10001;
  display: flex; flex-direction: row; gap: 6px;
  padding: 4px 10px;
  pointer-events: none;
  overflow: hidden;
  background: rgba(12,17,23,.04);
  border-top: 1px solid var(--border);
  min-height: 28px;
}
.opt-sell-toast-stack:empty { display: none; }

.opt-sell-toast {
  pointer-events: auto;
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 22px 2px 8px;
  background: var(--surface);
  border: 1px solid var(--down-2);
  border-left: 3px solid var(--down);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(12,17,23,.10);
  font-family: var(--font-data);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  flex: 0 0 auto;
  height: 22px;
  animation: opt-toast-in .18s var(--ease, ease) both;
}
.opt-sell-toast.is-leaving { animation: opt-toast-out .18s var(--ease, ease) both; }

.opt-sell-toast-icon {
  color: var(--down); font-size: 11px; font-weight: 800; line-height: 1;
}
.opt-sell-toast-title {
  font-size: 11px; font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}
.opt-sell-toast-time {
  font-size: 10px;
  color: var(--muted);
}

.opt-sell-toast-close {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  border: 0; background: transparent;
  font-size: 13px; line-height: 1; font-weight: 700;
  color: var(--muted-2);
  cursor: pointer;
  border-radius: 2px !important;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.opt-sell-toast:hover .opt-sell-toast-close { opacity: 1; }
.opt-sell-toast-close:hover { background: var(--surface-3); color: var(--ink); }

/* Thin countdown bar — visualizes the 5-min auto-dismiss along the top edge */
.opt-sell-toast-bar {
  position: absolute; left: 0; top: 0;
  height: 2px; width: 100%;
  background: var(--down);
  transform-origin: left center;
}
@keyframes opt-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes opt-toast-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes opt-toast-out { from { opacity: 1; transform: translateY(0); }   to { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .opt-sell-toast, .opt-sell-toast.is-leaving { animation: none; }
  .opt-sell-toast-bar { animation: none !important; transform: scaleX(0); }
}

/* Score color states (right list + tooltip) */
.opt-score-num.is-pos,
.opt-tip-score.is-pos  { color: var(--up-2) !important; }
.opt-score-num.is-neg,
.opt-tip-score.is-neg  { color: var(--down-2) !important; }
.opt-score-num.is-zero,
.opt-tip-score.is-zero { color: var(--muted) !important; }

/* Dormant rows — score 0, no heat tier. Slightly faded so they don't
   compete with active rows for attention but stay readable. */
.opt-row.is-dormant {
  opacity: 0.65;
}
.opt-row.is-dormant:hover { opacity: 1; }
.opt-row.is-dormant .opt-col-vol { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .opt-heat-high, .opt-row.opt-heat-high { animation: none !important; }
}

.opt-overflow-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-data); font-size: 10px; font-weight: 700;
  padding: 2px 6px;
  background: var(--surface-3); color: var(--ink-2);
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-2);
}
.opt-overflow-chip:hover { background: var(--ink); color: white; border-color: var(--ink); }

.opt-overflow-pop {
  position: fixed; z-index: 9998;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 6px;
  width: 280px;
  box-shadow: 0 8px 24px rgba(12,17,23,.10);
  display: none;
}
.opt-overflow-pop.visible { display: block; }
.opt-overflow-inner { max-height: 220px; overflow-y: auto; }
.opt-overflow-row {
  display: grid; grid-template-columns: 1fr 60px;
  padding: 6px 12px;
  font-family: var(--font-data); font-size: 11px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink-2);
}
.opt-overflow-row:hover { background: var(--surface-3); text-decoration: none; }
.opt-overflow-sym { font-weight: 600; }
.opt-overflow-score { text-align: right; color: var(--muted); }

/* Right ranked list */
.opt-list-head {
  display: grid; grid-template-columns: 28px 56px minmax(80px, 1fr) 52px 36px minmax(80px, 110px) minmax(60px, 80px);
  align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--surface-3);
  font-family: var(--font-data);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
  flex-shrink: 0;
}
.opt-col-rank, .opt-col-strike, .opt-col-vol { text-align: right; }
.opt-list-body { flex: 1; overflow-y: auto; }
.opt-row {
  display: grid; grid-template-columns: 28px 56px minmax(80px, 1fr) 52px 36px minmax(80px, 110px) minmax(60px, 80px);
  align-items: center; gap: 8px;
  padding: 6px 12px;
  height: 34px;
  font-family: var(--font-data); font-size: 11px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-fast);
}
.opt-row:hover { background: var(--surface-3); text-decoration: none; }
/* Symbol column: simple block with inline-block rabbit + text.
   text-overflow:ellipsis works directly on the block's text content. */
.opt-col-symbol {
  font-family: var(--font-ui); font-weight: 600;
  display: block !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 22px;
}
.opt-col-symbol .opt-rabbit {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 4px;
  /* Kill the scale animation inside the row — it bloats the rabbit and
     interacts badly with overflow:hidden, hiding the underlying text. */
  animation: none !important;
  transform: none !important;
  filter: drop-shadow(0 0 3px rgba(251,191,36,0.85));
}
.opt-col-symbol .opt-rabbit-svg {
  width: 14px !important; height: 14px !important;
  vertical-align: middle;
}
.opt-col-symbol .opt-symbol-name {
  display: inline;
  vertical-align: middle;
}
/* Trendline rows now use a pastel tint, not a bright fill. Symbol stays
   the default dark text color from the row so it stays readable. The old
   white-on-bright-green rule was retired with the row-tint change. */
.opt-row.is-gold-buy .opt-col-symbol,
.opt-row.is-gold-sell .opt-col-symbol {
  color: var(--ink) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.opt-type-pill {
  display: inline-grid; place-items: center;
  width: 28px; height: 18px;
  font-size: 10px; font-weight: 700;
  font-family: var(--font-data);
  border-radius: 3px;
}
.opt-type-pill.opt-type-ce { background: var(--up-bg); color: var(--up-2); }
.opt-type-pill.opt-type-pe { background: var(--down-bg); color: var(--down-2); }

.opt-score-num { font-weight: 600; font-size: 11px; }
.opt-score-of  { color: var(--muted-2); }
.opt-score-bar { height: 3px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 2px; }
.opt-score-fill { display: block; height: 100%; background: var(--ink); transition: width var(--t-fast); }

.opt-flag {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  font-family: var(--font-data);
  border-radius: 3px;
  border: 1px solid;
}
.opt-flag.is-long  { color: var(--up); border-color: var(--up); background: var(--up-bg); }
.opt-flag.is-short { color: var(--down); border-color: var(--down); background: var(--down-bg); }
.opt-flag.is-both  { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.opt-flag.is-none  { color: var(--muted); border-color: var(--border); background: var(--surface-3); }
.opt-flag.is-sellevent {
  color: white !important; background: var(--down) !important; border-color: var(--down) !important;
  animation: pulse-sell 2s var(--ease) infinite;
}
@keyframes pulse-sell {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%     { box-shadow: 0 0 0 4px rgba(220,38,38,0); }
}

/* ── DUAL-TIMEFRAME DOTS (replaces the old single Long badge) ────────────
   Two small dots per row in the TF column — first is 15m state, second
   is 1h state. Server pre-computes the color via computeDot():
     green   = ≥1 indicator in buy AND no sells on that timeframe
     red     = ≥1 sell (or wrong-direction Long flag) on that timeframe
     neutral = no buys and no sells — quiet timeframe                  */
.opt-tf-dot {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  margin: 0 2px;
  border: 1.5px solid var(--border);
  vertical-align: middle;
}
.opt-tf-dot.s-green   { background: var(--up);     border-color: var(--up); }
.opt-tf-dot.s-red     { background: var(--down);   border-color: var(--down); }
.opt-tf-dot.s-neutral { background: var(--surface-3); border-color: var(--border); }
/* The 1h dot is rendered slightly thicker so the eye can read which is
   which when both are the same color. Subtle but enough at small sizes. */
.opt-tf-dot.tf-1h     { box-shadow: 0 0 0 2px var(--surface) inset; }

/* ── TRENDLINE ZONE (replaces rows 1 & 2 at the bottom of each section) ──
   Dedicated area for trendline-signal contracts. Always rendered so the
   layout reserves the space; the dots area inside is empty until a
   contract picks up a trendline buy/sell. The faint gold tint + 🐰
   marker in the rank slot signals "this is the trendline zone." */
.opt-row-strip.opt-row-trend {
  background: linear-gradient(90deg, rgba(251,191,36,0.08) 0%, rgba(251,191,36,0.02) 60%, transparent 100%);
  border-top: 1px dashed rgba(251,191,36,0.4);
  margin-top: 4px;
  padding-top: 2px;
}
.opt-row-rank-trend {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 3px rgba(251,191,36,0.85));
  animation: rabbit-pulse 1.4s ease-in-out infinite alternate;
}
.opt-row-rank-trend img { display: block; border-radius: 50%; }

/* ── GOLD STYLING (trendline buy/sell signal active) ──────────────────────
   When the 7th indicator (auto-trendline) is in buy or sell state, the
   contract gets MAXIMUM visual prominence per user spec:
     - BUY  → bright green background, golden glowing border, rapid blink
     - SELL → bright red   background, golden glowing border, rapid blink
   The blink is fast (0.6s) so the eye is drawn to it immediately.
   Both rows (right list) and chips (dot grid) share the same animation. */
/* Trendline rows: subtle green / red tint so direction is obvious, no
   flashing glow. The rabbit icon in the symbol cell can blink on its own
   (kept as-is). Plain text stays readable on the tint.
   The S / B pill inside is rendered flat (transparent background, plain
   text) because the row itself already tells you the direction. */
.opt-row.is-gold-buy {
  background: rgba(34,197,94,0.22) !important;
  border-left: 3px solid #16a34a !important;
  animation: none !important;
}
.opt-row.is-gold-sell {
  background: rgba(239,68,68,0.22) !important;
  border-left: 3px solid #dc2626 !important;
  animation: none !important;
}
.opt-row.is-gold-buy .opt-trend-pill,
.opt-row.is-gold-sell .opt-trend-pill {
  background: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
}

/* Score rows: tint the WHOLE row by direction. Mirrors the trendline-row
   treatment so both sides of the page read the same way at a glance. */
.opt-row.score-row.has-dir-buy {
  background: rgba(34,197,94,0.22) !important;
  border-left: 3px solid #16a34a !important;
}
.opt-row.score-row.has-dir-sell {
  background: rgba(239,68,68,0.22) !important;
  border-left: 3px solid #dc2626 !important;
}

/* Row separator. The base .opt-row uses var(--border) which disappears on
   the pastel tinted backgrounds (multiple buy rows in a row look like one
   block). A slightly darker translucent line shows on both white and
   tinted rows without being loud. */
.opt-row {
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
}
.opt-row.has-dir-buy,
.opt-row.is-gold-buy {
  border-bottom: 1px solid rgba(15,23,42,0.12) !important;
}
.opt-row.has-dir-sell,
.opt-row.is-gold-sell {
  border-bottom: 1px solid rgba(15,23,42,0.12) !important;
}

@keyframes tl-gold-buy-glow {
  0% {
    box-shadow: 0 0 6px 1px rgba(251,191,36,0.65),
                inset 0 0 4px 0 rgba(251,191,36,0.35);
    border-color: #fbbf24;
  }
  100% {
    box-shadow: 0 0 16px 4px rgba(253,224,71,1),
                inset 0 0 10px 1px rgba(253,224,71,0.7);
    border-color: #fde047;
  }
}
@keyframes tl-gold-sell-glow {
  0% {
    box-shadow: 0 0 6px 1px rgba(251,191,36,0.65),
                inset 0 0 4px 0 rgba(251,191,36,0.35);
    border-color: #fbbf24;
  }
  100% {
    box-shadow: 0 0 16px 4px rgba(253,224,71,1),
                inset 0 0 10px 1px rgba(253,224,71,0.7);
    border-color: #fde047;
  }
}

/* Same treatment on dot-grid chips. */
.opt-dot.is-gold-buy {
  background: #16a34a !important;
  border: 2px solid #fbbf24 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  animation: tl-gold-buy-glow 0.6s ease-in-out infinite alternate !important;
}
.opt-dot.is-gold-sell {
  background: #dc2626 !important;
  border: 2px solid #fbbf24 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  animation: tl-gold-sell-glow 0.6s ease-in-out infinite alternate !important;
}
.opt-dot.is-gold-buy .opt-dot-label,
.opt-dot.is-gold-sell .opt-dot-label {
  color: #ffffff !important;
  font-weight: 900 !important;
}
.opt-dot.is-gold-buy  .opt-dot-score,
.opt-dot.is-gold-sell .opt-dot-score {
  background: #fbbf24 !important;
  color: #422006 !important;
  font-weight: 900 !important;
}

@media (prefers-reduced-motion: reduce) {
  .opt-row.is-gold-buy,
  .opt-row.is-gold-sell,
  .opt-dot.is-gold-buy,
  .opt-dot.is-gold-sell {
    animation: none !important;
  }
}

/* Hover tooltip on options page */
.opt-hover-tip {
  position: fixed; z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 6px;
  width: 240px;
  box-shadow: 0 8px 24px rgba(12,17,23,.10);
  font-size: 12px;
  display: none;
}
.opt-hover-tip.visible { display: block; }
.opt-tip-head { padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.opt-tip-symbol { font-weight: 600; font-family: var(--font-ui); color: var(--ink); }
.opt-tip-strike { font-family: var(--font-data); color: var(--ink-2); margin-left: 4px; }
.opt-tip-score  { font-family: var(--font-data); font-size: 15px; font-weight: 700; color: var(--up); }
.opt-tip-of     { color: var(--muted-2); font-weight: 400; }
.opt-tip-grid   { padding: 8px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-family: var(--font-data); font-size: 10.5px; }
/* Section header above each cipher block (15m / 1h) */
.opt-tip-section-label {
  padding: 6px 12px 0;
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.opt-tip-score-sep { color: var(--muted-2); font-weight: 400; padding: 0 2px; }
.opt-ind { display: flex; align-items: center; gap: 4px; }
.opt-ind-glyph { font-weight: 700; }
.opt-ind-buy { color: var(--up); }
.opt-ind-sell { color: var(--down); }
.opt-ind-neutral { color: var(--muted-2); }
.opt-tip-spark { padding: 0 12px 4px; }
.opt-tip-foot {
  padding: 6px 12px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-data); font-size: 10px; color: var(--muted);
}
.opt-tip-meta b { color: var(--ink); font-weight: 600; }

/* Anonymous Signal 1..4 breakdown row inside the tooltip. Pills are
   labeled S1/S2/S3/S4 deliberately so the underlying indicator names
   stay private to the developer. State coloring matches the chart pills. */
.opt-tip-sig-row {
  padding: 6px 10px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.opt-tip-sig-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.opt-tip-sig-pill .opt-tip-sig-num {
  font-size: 9px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.10em;
}
.opt-tip-sig-pill .opt-tip-sig-val { font-weight: 700; }
.opt-tip-sig-pill.is-buy     { color: var(--up);   border-color: var(--up);   background: var(--up-bg); }
.opt-tip-sig-pill.is-buy     .opt-tip-sig-num { color: var(--up-2); }
.opt-tip-sig-pill.is-sell    { color: var(--down); border-color: var(--down); background: var(--down-bg); }
.opt-tip-sig-pill.is-sell    .opt-tip-sig-num { color: var(--down); }
.opt-tip-sig-pill.is-neutral { color: var(--muted-2); }

/* ISC direction dot — small colored marker inside the tooltip showing the
   current gate state. Green opens the buy direction, red opens the sell
   direction, gray means flat (no score regardless of indicators). */
.opt-tip-isc-row {
  padding: 4px 12px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--muted);
}
.opt-tip-isc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.opt-tip-isc-dot.is-green { background: var(--up);   box-shadow: 0 0 0 2px rgba(34,197,94,0.20); }
.opt-tip-isc-dot.is-red   { background: var(--down); box-shadow: 0 0 0 2px rgba(239,68,68,0.20); }
.opt-tip-isc-dot.is-flat  { background: var(--muted-2); }
.opt-tip-isc-text { font-weight: 700; color: var(--ink-2); }

/* Sell-direction score pill. Same shape as the buy pill, red palette. */
.opt-score-pill.is-sell {
  background: #fecaca !important;
  color: #7f1d1d !important;
  border: 1px solid #dc2626 !important;
}

/* options.html (but NOT option-king or crypto-king) — widen the underlying
   column so long names like "ADANIGREEN" stop truncating to "ADANIG...".
   The base .opt-row grid uses minmax(80px, 1fr) for the symbol cell which
   isn't enough room. Bump to 130px min. Also let the cell auto-grow rather
   than ellipsis-clip. */
.options-page:not(.option-king-page) .opt-row {
  grid-template-columns: 28px 56px minmax(130px, 1.5fr) 60px 40px minmax(70px, 100px) minmax(60px, 80px) !important;
}
.options-page:not(.option-king-page) .opt-col-symbol {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
}

/* Last 5 triggers list — soft secondary copy, no pills. Lives in the
   tooltip footer next to the score pills above; intentionally rendered
   as plain text so it doesn't compete with the boxed S1..S5 row. */
.opt-tip-triggers {
  list-style: none;
  margin: 0;
  padding: 2px 12px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--muted);
}
.opt-tip-triggers li {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
.opt-tip-triggers li:not(:last-child)::after {
  content: "·";
  color: var(--muted-2);
  margin-left: 10px;
}
.opt-tip-triggers li:first-child {
  color: var(--ink-2);
  font-weight: 600;
}
.opt-tip-triggers-empty {
  padding: 2px 12px 8px;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--muted);
}
/* Tiny B/S badge next to each trigger time so the user can read at a
   glance what the trendline was when it fired. */
.opt-tip-trig-dir {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: 1px;
  line-height: 1.4;
}
.opt-tip-trig-dir.is-buy  { background: var(--up-bg);   color: var(--up-2); }
.opt-tip-trig-dir.is-sell { background: var(--down-bg); color: var(--down-2); }

/* Pinned NIFTY / BANKNIFTY rows — subtle accent and a left rule so they
   visually anchor at the top of every column. */
.opt-row.is-pinned {
  background: linear-gradient(90deg, rgba(236,72,153,0.06) 0%, transparent 80%);
  border-left: 3px solid var(--accent, #ec4899);
}
.opt-row.is-pinned .opt-symbol-name {
  font-weight: 800;
  letter-spacing: 0.02em;
}
.opt-tip-flag {
  font-family: var(--font-data); font-size: 9px; font-weight: 800;
  letter-spacing: 0.10em; padding: 1px 5px; border: 1px solid;
}
.opt-tip-flag.is-long  { color: var(--up);   border-color: var(--up);   background: var(--up-bg); }
.opt-tip-flag.is-short { color: var(--down); border-color: var(--down); background: var(--down-bg); }
.opt-tip-flag.is-both  { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.opt-tip-type-CE { color: var(--up-2) !important; background: var(--up-bg); padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.opt-tip-type-PE { color: var(--down-2) !important; background: var(--down-bg); padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.opt-tip-move {
  font-family: var(--font-data); font-size: 11px; font-weight: 600;
  margin: 6px 12px;
  padding: 3px 6px;
  border-radius: 3px;
}
.opt-tip-move.is-long  { color: var(--up);   background: var(--up-bg); }
.opt-tip-move.is-short { color: var(--down); background: var(--down-bg); }

/* =============================================================================
   16b. USER PROFILE MODAL + SECURITY MODAL — repaint to brand
   These dialogs are injected by profile.js with hard-coded Tailwind gradients
   (from-purple-500, from-blue-500, etc.). Override every gradient + colour.
   ========================================================================== */
#profileModal, #securityModal {
  background: rgba(12,17,23,.5) !important;
  backdrop-filter: none !important;
}
#profileModal .modal-content,
#securityModal .modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(12,17,23,.20) !important;
}

/* Modal header — kill the purple/blue gradient (Tailwind sets background-image, not background) */
#profileModal .bg-gradient-to-r,
#securityModal .bg-gradient-to-r,
#profileModal .from-purple-500, #profileModal .from-blue-500, #profileModal .to-blue-600, #profileModal .to-indigo-600,
#securityModal .from-purple-500, #securityModal .from-blue-500, #securityModal .to-blue-600, #securityModal .to-indigo-600 {
  background: var(--ink) !important;
  background-image: none !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: transparent !important;
}

/* Avatar inside profile modal — kill the purple-blue gradient too */
#profileModal .bg-gradient-to-br {
  background: var(--ink) !important;
  background-image: none !important;
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
}

/* Email-card "from-purple-50 to-blue-50" wash */
#profileModal .from-purple-50, #profileModal .to-blue-50 {
  background: var(--surface-2) !important;
  background-image: none !important;
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  border-color: var(--border) !important;
}

/* Sign Out button — was red gradient */
#profileModal button.bg-gradient-to-r.from-red-500,
#securityModal button.bg-gradient-to-r.from-red-500,
#profileModal .from-red-500,
#profileModal .to-red-600,
#securityModal .from-blue-500,
#securityModal .to-indigo-600 {
  background: var(--down) !important;
  background-image: none !important;
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  border-radius: 0 !important;
  border: 1px solid var(--down) !important;
  color: white !important;
}
#profileModal button.bg-gradient-to-r.from-red-500:hover,
#securityModal button.bg-gradient-to-r.from-red-500:hover {
  background: var(--down-2) !important;
}
#profileModal h2, #securityModal h2 {
  color: white !important;
  font-family: var(--font-ui) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Avatar circle inside profile modal — was purple/blue gradient */
#profileModal .from-purple-500,
#profileModal .bg-gradient-to-br {
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to)) !important;
}

/* Email card — was purple/blue gradient bg */
#profileModal .from-purple-50.to-blue-50,
#profileModal .bg-gradient-to-r.from-purple-50 {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
#profileModal .border-purple-200 {
  border-color: var(--border) !important;
}

/* Account-detail boxes */
#profileModal .bg-slate-50,
#securityModal .bg-slate-50 {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  border-radius: 6px !important;
}
#profileModal .border-slate-200,
#securityModal .border-slate-200 {
  border-color: var(--border) !important;
}
#profileModal .text-slate-500,
#securityModal .text-slate-500 {
  color: var(--muted) !important;
  font-family: var(--font-data) !important;
}
#profileModal .text-slate-700, #profileModal .text-slate-800,
#securityModal .text-slate-700, #securityModal .text-slate-800 {
  color: var(--ink) !important;
}
#profileModal .text-emerald-600,
#securityModal .text-emerald-600 {
  color: var(--up-2) !important;
}
#profileModal .bg-emerald-500,
#securityModal .bg-emerald-500,
#profileModal .bg-emerald-400,
#securityModal .bg-emerald-400 {
  background: var(--up-bright) !important;
}

/* "Secure session" notice — was blue tint */
#profileModal .bg-blue-50,
#securityModal .bg-blue-50 {
  background: var(--up-bg) !important;
  border-color: var(--up) !important;
  border-radius: 6px !important;
}
#profileModal .border-blue-200,
#securityModal .border-blue-200 {
  border-color: var(--up) !important;
}
#profileModal .text-blue-600,
#securityModal .text-blue-600 {
  color: var(--up-2) !important;
}
#profileModal .text-blue-700,
#securityModal .text-blue-700 {
  color: var(--up-2) !important;
}
#profileModal .text-blue-900,
#securityModal .text-blue-900 {
  color: var(--up-2) !important;
}

/* Security features — green checkmark cards */
#securityModal .bg-emerald-50 {
  background: var(--up-bg) !important;
  border-color: var(--up) !important;
  border-radius: 6px !important;
}
#securityModal .border-emerald-200 {
  border-color: var(--up) !important;
}

/* Amber warning card */
#securityModal .bg-amber-50 {
  background: var(--accent-bg) !important;
  border-color: var(--accent) !important;
}
#securityModal .border-amber-200 {
  border-color: var(--accent) !important;
}
#securityModal .text-amber-600 {
  color: var(--accent-2) !important;
}

/* Footer buttons — Close (outline) + Sign Out (was red gradient → solid ink red) */
#profileModal .bg-gradient-to-r.from-red-500,
#securityModal .bg-gradient-to-r.from-red-500,
#profileModal .from-red-500.to-red-600 {
  background: var(--down) !important;
  background-image: none !important;
  border-radius: 0 !important;
  border: 1px solid var(--down) !important;
  color: white !important;
  font-family: var(--font-ui) !important;
  box-shadow: none !important;
  transition: background var(--t-fast) !important;
}
#profileModal .bg-gradient-to-r.from-red-500:hover,
#securityModal .bg-gradient-to-r.from-red-500:hover {
  background: var(--down-2) !important;
  transform: none !important;
}

/* Close button (outline style) */
#profileModal button.border-slate-300,
#securityModal button.border-slate-300 {
  border-radius: 0 !important;
  border-color: var(--border-2) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  font-family: var(--font-ui) !important;
}
#profileModal button.border-slate-300:hover,
#securityModal button.border-slate-300:hover {
  background: var(--surface-3) !important;
  border-color: var(--ink) !important;
}

/* Override the .rounded-2xl / .rounded-xl / .rounded-lg in these modals to sharper */
#profileModal .rounded-2xl, #securityModal .rounded-2xl { border-radius: 6px !important; }
#profileModal .rounded-xl,  #securityModal .rounded-xl  { border-radius: 6px !important; }
#profileModal .rounded-lg,  #securityModal .rounded-lg  { border-radius: 3px !important; }

/* =============================================================================
   17. FEEDBACK MODAL
   ========================================================================== */
.feedback-modal-overlay {
  position: fixed !important; inset: 0 !important;
  background: rgba(12,17,23,.5) !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999;
  /* display is managed by feedback.js — don't force it. Default hidden. */
  display: none;
}
.feedback-modal-overlay.open {
  display: flex !important;
}
.feedback-modal {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 6px !important;
  padding: 24px !important;
  width: 100%; max-width: 460px;
  box-shadow: 0 8px 24px rgba(12,17,23,.20) !important;
}
.feedback-form { display: flex; flex-direction: column; gap: 12px; }
.feedback-rating { display: flex; gap: 8px; align-items: center; }
.feedback-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  transition: all var(--t-fast);
}
.feedback-btn.active, .feedback-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
.feedback-textarea {
  width: 100%; min-height: 100px;
  padding: 10px 12px;
  font-family: var(--font-ui); font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  resize: vertical;
}
.feedback-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.feedback-submit-btn, .feedback-cancel-btn {
  padding: 8px 14px !important;
  font-size: 13px !important; font-weight: 500 !important;
  border-radius: 0 !important;
  cursor: pointer;
  border: 1px solid !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background var(--t-fast) !important;
}
.feedback-submit-btn {
  background: var(--ink) !important;
  color: white !important;
  border-color: var(--ink) !important;
}
.feedback-submit-btn:hover {
  background: var(--ink-2) !important;
  transform: none !important;
  box-shadow: none !important;
}
.feedback-cancel-btn {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border-2) !important;
}
.feedback-cancel-btn:hover {
  background: var(--surface-3) !important;
  border-color: var(--ink) !important;
}
.feedback-modal h3 { color: var(--ink) !important; font-family: var(--font-ui) !important; font-weight: 700 !important; }
.feedback-modal p  { color: var(--ink-2) !important; font-family: var(--font-ui) !important; }
.feedback-textarea {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 3px !important;
}
.feedback-textarea:focus { outline: none !important; border-color: var(--ink) !important; box-shadow: 0 0 0 3px rgba(12,17,23,.08) !important; }
.feedback-rating button { font-family: inherit !important; }
.feedback-success {
  padding: 12px;
  background: var(--up-bg); color: var(--up-2);
  border-left: 3px solid var(--up);
  border-radius: 3px;
}

/* =============================================================================
   18. INSPECTOR PAGE
   ========================================================================== */
.insp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 8px;
  font-size: 12px;
}
.insp-card.is-buy   { border-left-color: var(--up); }
.insp-card.is-sell  { border-left-color: var(--down); }
.insp-card.is-mixed { border-left-color: var(--muted-2); }
.ind-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.ind-pill {
  font-family: var(--font-data); font-size: 10px;
  padding: 1px 5px; border-radius: 3px;
}
.ind-pill.buy  { background: var(--up-bg);   color: var(--up-2); }
.ind-pill.sell { background: var(--down-bg); color: var(--down-2); }
.ind-pill.neut { background: var(--surface-3); color: var(--ink-3); }

/* JSON syntax highlighting */
.json-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 12px;
  max-height: 280px;
  overflow: auto;
}
.json-block pre {
  white-space: pre-wrap; word-break: break-all;
  font-family: var(--font-data); font-size: 12px;
  line-height: 1.45; color: var(--ink-2); margin: 0;
}

/* =============================================================================
   19. LOGIN PAGE
   ========================================================================== */
body[class*="login"] main, .login-shell {
  display: grid; place-items: center;
  min-height: 100vh;
  background: var(--surface-2);
  padding: 32px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(12,17,23,.08);
}

/* =============================================================================
   20. PILLS / BADGES (used by inspector)
   ========================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
}
.pill-up   { background: var(--up-bg);   color: var(--up-2); }
.pill-down { background: var(--down-bg); color: var(--down-2); }
.pill-mute { background: var(--surface-3); color: var(--ink-3); }
.pill-info { background: var(--blue-bg); color: var(--blue); }
.pill-warn { background: var(--accent-bg); color: var(--accent); }

/* =============================================================================
   21. TAILWIND COLOR OVERRIDES — generic neutralization
   ========================================================================== */
.bg-white       { background-color: var(--surface) !important; }
.bg-gray-50     { background-color: var(--surface-2) !important; }
.bg-gray-100    { background-color: var(--surface-3) !important; }
.bg-slate-50    { background-color: var(--surface-2) !important; }
.bg-slate-100   { background-color: var(--surface-3) !important; }
.text-slate-700 { color: var(--ink-2) !important; }
.text-slate-800 { color: var(--ink) !important; }
.text-slate-500 { color: var(--muted) !important; }
.text-slate-400 { color: var(--muted-2) !important; }
.text-slate-300 { color: var(--border-2) !important; }
.text-emerald-600, .text-emerald-700 { color: var(--up) !important; }
.text-emerald-400, .text-emerald-500 { color: var(--up-bright) !important; }
.bg-emerald-50, .bg-emerald-100      { background-color: var(--up-bg) !important; }
.bg-emerald-500                       { background-color: var(--up-bright) !important; }
.border-emerald-200                   { border-color: var(--up) !important; }
.text-emerald-700                     { color: var(--up-2) !important; }
.bg-red-50, .bg-red-100              { background-color: var(--down-bg) !important; }
.text-indigo-600                      { color: var(--accent-2) !important; }
.bg-indigo-700                        { background: linear-gradient(135deg, var(--brand-from), var(--brand-to)) !important; }

/* Material Symbols default */
.material-symbols-outlined { font-size: 18px; line-height: 1; }

/* =============================================================================
   24. CALL 1 CIRCULAR INDICATOR — kill the heavy colored square cell, replace
   with a small circle + price text on the row's natural background.
   "Subtle financial terminal" look.
   ========================================================================== */

/* Kill the cell background tint for Call 1 cells (was bg-amber-50 / -100).
   The row already shows direction via static-green / strong-row-* tint. */
.ranked-grid-container:not(.text-xs.font-semibold) .bg-amber-50,
.ranked-grid-container:not(.text-xs.font-semibold) [class*="bg-amber-100"],
.ranked-grid-container:not(.text-xs.font-semibold) .bg-blue-50,
.ranked-grid-container:not(.text-xs.font-semibold) [class*="bg-blue-100"] {
  background: transparent !important;
}

/* Call 1 price text — clean mono, no decorative dot before it.
   The count badge (only when count > 0) is the single circular indicator. */
.ranked-grid-container > div .text-green-700.font-extrabold,
.ranked-grid-container > div .text-red-700.font-extrabold {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-family: var(--font-data) !important;
}
/* Explicitly suppress any decorative ::before dot. */
.ranked-grid-container > div .text-green-700.font-extrabold::before,
.ranked-grid-container > div .text-red-700.font-extrabold::before {
  content: none !important;
  display: none !important;
}

/* The single count badge — keep it a clean circle, slightly larger so the
   number is legible. This is the ONE circle per Call 1 cell. */
.ranked-grid-container [style*="background-color: #38CB6E"],
.ranked-grid-container [style*="background-color: #F15656"] {
  width: 18px !important; height: 18px !important;
  min-width: 18px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

/* Soften the percent badge in symbol cell — was rectangular green/red bg */
.ranked-grid-container .bg-green-100,
.ranked-grid-container .bg-red-100 {
  background: transparent !important;
  padding: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}

/* Subtler symbol-cell typography — reduce the heavy bold of the ticker text */
.ranked-grid-container > div.text-gray-800,
.ranked-grid-container > div .font-bold.text-gray-800 {
  font-weight: 600 !important;
  letter-spacing: 0;
  font-family: var(--font-ui) !important;
}

/* Trend arrow — make it subtle, not loud */
.ranked-grid-container .material-symbols-outlined {
  font-size: 13px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  opacity: 0.85;
}

/* Soften the row dividers — half-tone hairlines */
.ranked-grid-container:not(.text-xs.font-semibold) {
  border-bottom: 1px solid var(--border) !important;
}
.ranked-grid-container:not(.text-xs.font-semibold) > div {
  border-color: var(--border) !important;
}

/* Soften the static-green/flash-green so the row indicates direction
   without screaming at the trader. Keep strong-row-* still vivid. */
.ranked-grid-container.static-green:not(.strong-row-buy):not(.strong-row-sell) {
  background-color: rgba(34,197,94,.06) !important;
  box-shadow: inset 3px 0 0 0 var(--up) !important;
}
.ranked-grid-container.static-red:not(.strong-row-buy):not(.strong-row-sell) {
  background-color: rgba(239,68,68,.06) !important;
  box-shadow: inset 3px 0 0 0 var(--down) !important;
}
.ranked-grid-container.flash-green:not(.strong-row-buy):not(.strong-row-sell) {
  background-color: rgba(34,197,94,.10) !important;
  box-shadow: inset 3px 0 0 0 var(--up) !important;
}
.ranked-grid-container.flash-red:not(.strong-row-buy):not(.strong-row-sell) {
  background-color: rgba(239,68,68,.10) !important;
  box-shadow: inset 3px 0 0 0 var(--down) !important;
}

/* Rank number cell — always visible, mono, dark ink. Override strong-row
   text-color recolors so the number stays readable on green/red row tints. */
.ranked-grid-container > div:first-child .text-sm.font-bold,
.ranked-grid-container.strong-row-buy  > div:first-child .text-sm.font-bold,
.ranked-grid-container.strong-row-sell > div:first-child .text-sm.font-bold,
.ranked-grid-container.strong-row-buy  > div:first-child .text-gray-700,
.ranked-grid-container.strong-row-sell > div:first-child .text-gray-700 {
  font-size: 12px !important;
  font-weight: 800 !important;
  font-family: var(--font-data) !important;
  letter-spacing: 0;
  color: var(--ink) !important;
}
/* Top-3 medals keep their gold/silver/bronze tint over the ink default. */
.ranked-grid-container > div:first-child .rank-gold   { color: #b45309 !important; }
.ranked-grid-container > div:first-child .rank-silver { color: #475569 !important; }
.ranked-grid-container > div:first-child .rank-bronze { color: #92400e !important; }

/* Trend arrow in symbol cell — never let it go white. Always green/red. */
.ranked-grid-container .text-green-600.material-symbols-outlined,
.ranked-grid-container .text-white.material-symbols-outlined[class*="trending_up"],
.ranked-grid-container .flash-green .material-symbols-outlined,
.ranked-grid-container .static-green .material-symbols-outlined {
  color: var(--up-2) !important;
  text-shadow: none !important;
}
.ranked-grid-container .text-red-600.material-symbols-outlined,
.ranked-grid-container .text-white.material-symbols-outlined[class*="trending_down"],
.ranked-grid-container .flash-red .material-symbols-outlined,
.ranked-grid-container .static-red .material-symbols-outlined {
  color: var(--down-2) !important;
  text-shadow: none !important;
}
/* Belt-and-suspenders: any white material icon inside a row gets recolored
   based on the row's direction tint. */
.ranked-grid-container.strong-row-buy  .material-symbols-outlined,
.ranked-grid-container .static-green   .material-symbols-outlined,
.ranked-grid-container .flash-green    .material-symbols-outlined {
  color: var(--up-2) !important;
}
.ranked-grid-container.strong-row-sell .material-symbols-outlined,
.ranked-grid-container .static-red     .material-symbols-outlined,
.ranked-grid-container .flash-red      .material-symbols-outlined {
  color: var(--down-2) !important;
}

/* GO! / STOP! cell — TEXT ONLY, no background pill. Big bold colored text. */
.ranked-grid-container .bg-green-500,
.ranked-grid-container .bg-red-500 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  font-family: var(--font-data) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  border: 0 !important;
}
.ranked-grid-container .bg-green-500 { color: var(--up-2) !important; }
.ranked-grid-container .bg-red-500   { color: var(--down-2) !important; }
/* Keep the same text-only treatment inside strong rows (override section 10) */
.ranked-grid-container.strong-row-buy  .bg-green-500,
.ranked-grid-container.strong-row-sell .bg-green-500 {
  background: transparent !important; background-image: none !important;
  color: var(--up-2) !important;
}
.ranked-grid-container.strong-row-buy  .bg-red-500,
.ranked-grid-container.strong-row-sell .bg-red-500 {
  background: transparent !important; background-image: none !important;
  color: var(--down-2) !important;
}

/* Pin button — quieter default, accent only on hover/active */
.pin-toggle-btn .material-symbols-outlined { font-size: 16px !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* =============================================================================
   25. FLATTEN ROW SEGMENTATION — kill the "square block" appearance.
   Cells inside a ranked row should not paint their own backgrounds or hard
   vertical borders; the ROW carries the tint. Keeps a hairline divider only
   between the rank cell and the symbol cell (and after Buy/Sell separators).
   ========================================================================== */
.ranked-grid-container:not(.text-xs.font-semibold) > div {
  background: transparent !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-color: transparent !important;
}
/* Keep the rank cell visually distinct with one subtle vertical hairline */
.ranked-grid-container:not(.text-xs.font-semibold) > div:first-child {
  border-right: 1px solid rgba(15,23,42,.06) !important;
}
/* Keep the symbol cell separated from signal cells */
.ranked-grid-container:not(.text-xs.font-semibold) > div:nth-child(2) {
  border-right: 1px solid rgba(15,23,42,.06) !important;
}

/* Row hover — single horizontal band, no per-cell highlight */
.ranked-grid-container:not(.text-xs.font-semibold):hover {
  background-color: rgba(15,23,42,.025) !important;
}

/* Soften the strong-row tints further so they read as a calm bar, not a slab */
.ranked-grid-container.strong-row-buy {
  background: rgba(34,197,94,.10) !important;
  box-shadow: inset 4px 0 0 0 var(--up-2) !important;
}
.ranked-grid-container.strong-row-sell {
  background: rgba(239,68,68,.10) !important;
  box-shadow: inset 4px 0 0 0 var(--down-2) !important;
}

/* =============================================================================
   23. NO ROUNDED CORNERS — global, applied last so it wins
   User has explicitly stated no rounded corners. Sharp edges everywhere.
   Exceptions: avatar circle (must stay round), live-dot, pulse rings.
   ========================================================================== */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl,
.rounded-t, .rounded-t-sm, .rounded-t-md, .rounded-t-lg, .rounded-t-xl, .rounded-t-2xl,
.rounded-b, .rounded-b-sm, .rounded-b-md, .rounded-b-lg, .rounded-b-xl, .rounded-b-2xl,
.rounded-l, .rounded-r,
button, .btn, input, textarea, select,
.feedback-modal, .feedback-textarea, .feedback-btn,
.feedback-submit-btn, .feedback-cancel-btn,
#profileMenu, #profileModal, #securityModal,
#profileModal *, #securityModal *,
#profileMenu *,
.modal-content, .modal-content *,
.tr-topbar, .tr-topbar *,
.dev-link, .nav-link,
.zoom-strip, .zoom-strip button,
.chart-filter-btn,
.opt-row, .opt-list-head, .opt-section-head, .opt-section,
.opt-flag, .opt-type-pill, .opt-score-bar, .opt-score-fill,
.opt-overflow-pop, .opt-overflow-row, .opt-overflow-chip,
.opt-hover-tip, .opt-tip-head, .opt-tip-grid, .opt-tip-foot, .opt-tip-flag, .opt-tip-move,
.insp-card, .ind-pill,
.json-block,
.tr-float-tip,
.pill, .strong-badge, .control-btn,
.status-bar, .status-bar *,
.ranked-grid-container,
.ranked-grid-container *,
.fb-stat, .fb-item, .fb-rating-pill {
  border-radius: 0 !important;
}

/* Keep only the truly circular elements round */
.live-dot, .sb-dot,
#profileButton > div:first-child,
#userInitials, #userInitialsLarge,
.opt-dot::before,
.feedback-modal-overlay button[onclick*="remove"],
.ranked-grid-container .rounded-full,
.ranked-grid-container span[style*="background-color: #38CB6E"],
.ranked-grid-container span[style*="background-color: #F15656"] {
  border-radius: 999px !important;
}
.brand-img { border-radius: 0 !important; }

/* =============================================================================
   22. FLOATING TOOLTIP (tr-redesign.js)
   ========================================================================== */
.tr-float-tip {
  position: fixed; z-index: 10000;
  background: var(--ink); color: white;
  padding: 6px 10px;
  border-radius: 3px;
  font-family: var(--font-data);
  font-size: 12px; font-weight: 500;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(12,17,23,.20);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.tr-float-tip.is-visible { opacity: 1; transform: translateY(0); }
.tr-float-tip .tip-up { color: var(--up-bright); }
.tr-float-tip .tip-dn { color: var(--down-bright); }

/* ── 4-COLUMN OPTIONS LAYOUT (post-trendline-only redesign) ────────────
   Removes the dot grid entirely. Four equal-width columns side by side:
     Col 1 — Trendline · CE
     Col 2 — Trendline · PE
     Col 3 — Score · CE
     Col 4 — Score · PE
   Each column has its own header (tag + side chip + count) and subheader
   (rank · underlying · strike · score/TL · volume), and scrolls vertically
   independently. */
.opt4-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  background: var(--surface);
}
.opt4-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
}
.opt4-col:last-child { border-right: none; }
/* Visually separate the trendline group from the score group.
   The divider between cols 2 and 3 is a thick ink bar; trendline cols
   carry the rabbit favicon + a faint warm tint; score cols carry a Σ
   marker + a faint cool tint. This makes the two halves obviously
   different at a glance without crowding the layout. */
.opt4-col.is-trendline.is-pe {
  border-right: 4px double var(--ink);
}
.opt4-col.is-trendline { background: linear-gradient(180deg, rgba(251,191,36,0.04) 0%, transparent 80%); }
.opt4-col.is-score     { background: linear-gradient(180deg, rgba(37,99,235,0.05)  0%, transparent 80%); }

.opt4-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-data);
  font-size: 11px;
}
.opt4-col.is-trendline .opt4-col-head {
  background: linear-gradient(90deg, rgba(251,191,36,0.18) 0%, var(--surface-2) 60%);
  border-bottom-color: rgba(251,191,36,0.45);
}
.opt4-col.is-score .opt4-col-head {
  background: linear-gradient(90deg, rgba(37,99,235,0.14) 0%, var(--surface-2) 60%);
  border-bottom-color: rgba(37,99,235,0.45);
}
.opt4-col-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex: 0 0 18px;
}
.opt4-col-mark img { display: block; }
.opt4-col-mark.is-score {
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-data);
  font-weight: 800;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.opt4-col-tag {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.opt4-col.is-trendline .opt4-col-tag { color: #b45309; }
.opt4-col.is-score     .opt4-col-tag { color: #1d4ed8; }
.opt4-col-side {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}
.opt4-col-side.is-ce { background: var(--up-bg); color: var(--up-2); }
.opt4-col-side.is-pe { background: var(--down-bg); color: var(--down-2); }
.opt4-col-count {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-data);
}
.opt4-col-subhead,
.opt4-col-body .opt-row.mkt-row {
  display: grid !important;
  /* rank · symbol · strike · score-pill/TL-pill · volume */
  grid-template-columns: 26px minmax(70px, 1fr) 44px 50px minmax(40px, 60px) !important;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-family: var(--font-data);
  font-size: 11px;
}
.opt4-col-subhead {
  background: var(--surface-3);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  border-bottom: 1px solid var(--border);
}
.opt4-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.opt4-col-body .opt-row.mkt-row {
  border-bottom: 1px dashed var(--border);
  color: var(--ink);
  text-decoration: none;
}
.opt4-col-body .opt-row.mkt-row:hover { background: var(--surface-2); }
.opt4-col-body .opt-col-symbol {
  display: block !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 600;
}

/* ── Score pill (0..4) — colored by tier ──────────────────────────────── */
.opt-score-pill {
  display: inline-block;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--muted);
}
/* Direction-only score pill colors. Clear, saturated background so the
   buy / sell call reads at a glance. No tier gradient: a buy is green at
   any score, a sell is red at any score, zero is gray. The number plus
   the arrow carry the score detail. */
.opt-score-pill.is-buy {
  background: #bbf7d0 !important;
  color: #14532d !important;
  border: 1px solid #16a34a !important;
}
.opt-score-pill.is-zero {
  background: var(--surface-3) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
}
/* Strong Buy is retired. Old tier classes (is-low / is-mid / is-high /
   is-strong) are no longer applied by the JS, but the alias keeps any
   leftover markup readable as a plain buy. */
.opt-score-pill.is-low,
.opt-score-pill.is-mid,
.opt-score-pill.is-high,
.opt-score-pill.is-strong {
  background: #bbf7d0 !important;
  color: #14532d !important;
  border: 1px solid #16a34a !important;
}

/* ── Strong-buy row treatment ─────────────────────────────────────────── */
.opt-row.mkt-row.is-strong-buy {
  background: linear-gradient(90deg, rgba(251,191,36,0.18) 0%, rgba(251,191,36,0.04) 100%);
  border-left: 3px solid #f59e0b;
}

/* ── Swing-touch contrast (trendline rows whose anchor sits on a recent
       swing high/low pivot) ─────────────────────────────────────────────── */
.opt-row.mkt-row.has-swing-touch {
  outline: 1px dashed rgba(37, 99, 235, 0.55);
  outline-offset: -1px;
}
.opt-row.mkt-row.has-swing-touch .opt-symbol-name::after {
  content: "◆";
  margin-left: 4px;
  color: rgba(37, 99, 235, 0.8);
  font-size: 9px;
  vertical-align: middle;
}

/* ── Strong-buy toast ─────────────────────────────────────────────────── */
.opt-strong-toast {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 1000;
  padding: 10px 14px;
  background: #f59e0b;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  border-left: 4px solid #b45309;
}
.opt-strong-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.opt-strong-bolt { color: #fef3c7; margin-right: 4px; }

/* ── Swing-touch hover popover ────────────────────────────────────────── */
.opt-swing-pop {
  position: fixed;
  z-index: 1001;
  width: 240px;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.opt-swing-pop.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.opt-swing-pop-head {
  margin-bottom: 6px;
  font-size: 11px;
  font-family: var(--font-data);
  color: #93c5fd;
}
.opt-swing-pop-row { font-size: 11px; line-height: 1.4; opacity: 0.85; margin-bottom: 4px; }

/* Crypto King: same .opt4-grid skeleton but only 2 columns instead of 4. */
.opt4-grid.crypto-2col { grid-template-columns: 1fr 1fr; }
.opt4-col-side.is-crypto {
  background: #fbbf24;
  color: #422006;
  font-weight: 800;
}
.crypto-row .opt-col-symbol {
  font-family: var(--font-data);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Crypto row grid: rank · pair · pill · volume (no strike) */
.opt4-col.is-trendline .opt4-col-subhead,
.opt4-col.is-trendline .opt4-col-body .opt-row.crypto-row,
.opt4-col.is-score .opt4-col-subhead,
.opt4-col.is-score .opt4-col-body .opt-row.crypto-row {
  /* Only override on crypto rows — option-king (4-col) keeps the 5-col grid. */
}
.crypto-king-page .opt4-col-subhead,
.crypto-king-page .opt4-col-body .opt-row.crypto-row {
  grid-template-columns: 32px minmax(80px, 1fr) 60px minmax(50px, 70px) !important;
}

/* Existing trendline-only single-list rule kept for backward compat with
   any other page that might still reference .is-trendline-only. */
.opt-list-head.is-trendline-only {
  display: grid !important;
  grid-template-columns: 32px minmax(140px, 1.6fr) 60px 40px minmax(70px, 110px) minmax(60px, 90px) !important;
  align-items: center;
  gap: 8px;
}

/* ── TRENDLINE-ONLY MODE pill ──────────────────────────────────────────
   Used in the options ranked list (Score column slot) and inside the
   tooltip to represent the current trendline state. */
.opt-trend-pill {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
}
.opt-trend-pill.is-buy  { background: var(--up-bg);   color: var(--up-2);   border-color: var(--up); }
.opt-trend-pill.is-sell { background: var(--down-bg); color: var(--down-2); border-color: var(--down); }
.opt-trend-pill.is-flat { background: var(--surface-3); color: var(--muted); border-color: var(--border-2); }

/* ── MARKETS PAGE OVERRIDES ─────────────────────────────────────────────
   Markets page has 150 instruments but only one section. Per user spec:
     - Chips small (so many fit per row)
     - No +N overflow chip — let chips wrap and the rows container scroll
     - Rows grow vertically as chips wrap; no fixed row height. */
.markets-page .opt-row-strip {
  align-items: flex-start;
  padding: 8px 0;
}
.markets-page .opt-row-rank {
  font-size: 13px;
  padding-top: 4px;
}
.markets-page .opt-row-track {
  gap: 4px;
}
.markets-page .opt-row-dots {
  gap: 4px;
  flex-wrap: wrap;
}
.markets-page .opt-dot {
  padding: 3px 6px !important;
  font-size: 10px !important;
  min-height: 0;
  line-height: 1.2;
}
.markets-page .opt-dot-label {
  font-size: 10px;
  font-weight: 600;
}
.markets-page .opt-dot-score {
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.markets-page .opt-row-strip.opt-row-trend {
  padding: 10px 0;
}
.markets-page .opt-row-rank-trend img {
  width: 22px !important;
  height: 22px !important;
}
/* Hide any +N chip that may sneak in (defensive). */
.markets-page .opt-overflow-chip { display: none !important; }
/* Vertical scroll inside the dot-grid container so all chips stay reachable. */
.markets-page .opt-rows { overflow-y: auto; }

/* Intraday-page trendline badge: small chip injected into the symbol
   cell on index.html when SP Combined v1's intraday alert fires
   a buy/sell that's still live. Sits before the percent change so it
   reads left-to-right: 🐰 B  ↑ +2.10% RELIANCE. */
.tl-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
  white-space: nowrap;
}
.tl-rabbit { font-size: 12px; line-height: 1; }
.tl-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 2px;
  line-height: 1.3;
}
.tl-pill-buy  { background: #bbf7d0; color: #166534; }
.tl-pill-sell { background: #fecaca; color: #991b1b; }

/* ===================================================================== */
/* Intraday trendline UI — history button + modal + hover tooltip        */
/* ===================================================================== */
.tl-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
  padding: 4px 8px;
  font-family: var(--font-data);
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 120ms;
}
.tl-history-btn:hover { background: var(--surface-2); }
.tl-history-btn .material-symbols-outlined { font-size: 16px; line-height: 1; }
.tl-history-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  background: var(--up);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 14px;
}
.tl-history-count.is-zero { background: var(--muted-2); }

/* Modal overlay (defaults hidden — .is-open toggles flex) */
.tl-history-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.tl-history-overlay.is-open { display: flex; }
.tl-history-modal {
  background: #fff;
  border: 1px solid var(--border);
  width: min(640px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
}
.tl-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  background: var(--ink);
  color: #fff;
}
.tl-history-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.tl-history-body {
  overflow-y: auto;
  flex: 1;
  font-family: var(--font-data);
  font-size: 12px;
}
.tl-history-meta {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}
.tl-history-date { font-weight: 700; color: var(--ink-2); }
.tl-history-table {
  width: 100%;
  border-collapse: collapse;
}
.tl-history-table th,
.tl-history-table td {
  text-align: left;
  padding: 6px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.tl-history-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-2);
  position: sticky;
  top: 0;
}
.tl-h-time { color: var(--ink-2); width: 30%; }
.tl-h-sym  { font-weight: 700; color: var(--ink); }
.tl-h-dir  { width: 60px; text-align: center; }
.tl-history-empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* Hover tooltip on intraday rows */
.tl-hover-tip {
  position: fixed;
  display: none;
  background: #0c1117;
  color: #fff;
  border-radius: 3px;
  padding: 8px 10px;
  font-family: var(--font-data);
  font-size: 11px;
  min-width: 180px;
  max-width: 220px;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.tl-hover-tip.is-visible { display: block; }
.tl-tip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tl-tip-symbol { font-weight: 700; font-size: 12px; }
.tl-tip-dir {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 2px;
}
.tl-tip-dir.is-buy  { background: #14532d; color: #bbf7d0; }
.tl-tip-dir.is-sell { background: #7f1d1d; color: #fecaca; }
.tl-tip-dir.is-flat { background: #374151; color: #9ca3af; }
.tl-tip-section {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tl-tip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tl-tip-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tl-tip-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.tl-tip-chip.is-buy  { background: #14532d; color: #bbf7d0; }
.tl-tip-chip.is-sell { background: #7f1d1d; color: #fecaca; }
.tl-tip-time { color: rgba(255, 255, 255, 0.85); }

/* =============================================================================
   Options v2.0 · C/P button column + Symbol link + Contracts modal
   =============================================================================
   Scoped to `.page-options-v2` on <body> so the intraday, swing, options,
   option-king, and crypto-king pages are untouched. */

/* 9-column row grid: Rank | C/P | Symbol | 5 signal cells | Pin */
.page-options-v2 .ranked-grid-container {
  grid-template-columns: 0.5fr 0.9fr 1.6fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
  min-width: 440px;
}
/* Matching 9-column header grid so the Symbol / CALL columns visually
   line up with the row cells below. Rank and Pin get empty spacer cells
   because the header has no rank number or pin toggle to show. */
.page-options-v2 .grid-container {
  grid-template-columns: 0.5fr 0.9fr 1.6fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
}

/* Joined Call / Put button pair — sits in the new column between Rank
   and Symbol. Tiny, side-by-side, green + red so the intent is obvious
   without a legend. Anchors so a plain click / middle-click / cmd-click
   all work as expected. */
.cp-btn-group {
  display: inline-flex;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #d1d5db;
  font-family: var(--font-data, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}
.cp-btn {
  padding: 3px 7px;
  color: #ffffff;
  text-decoration: none;
  transition: filter 0.15s ease;
  min-width: 20px;
  text-align: center;
  display: inline-block;
}
.cp-btn:hover  { filter: brightness(1.12); text-decoration: none; color: #fff; }
.cp-btn:active { filter: brightness(0.94); }
.cp-btn.cp-call { background: #16a34a; }
.cp-btn.cp-put  { background: #dc2626; }
.cp-btn.cp-disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
}

/* Symbol name becomes clickable. Kept visually as plain bold text so
   the row layout doesn't shift; a dashed underline appears on hover to
   signal the anchor. */
.symbol-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease;
  cursor: pointer;
}
.symbol-link:hover {
  border-bottom-color: currentColor;
  text-decoration: none;
  color: inherit;
}

/* Topbar "Contracts" button (mirrors the .dev-link visual). */
.ov2-contracts-openbtn {
  color: var(--muted, #9ca3af);
  font-size: 12px;
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--font-data, monospace);
  margin-right: 6px;
}
.ov2-contracts-openbtn:hover {
  color: var(--ink, #0c1117);
  border-color: var(--accent, #ec4899);
}

/* Contracts modal. Hidden by default; JS flips `.open` to show it.
   Deliberately default to display:none so the show/hide toggle stays
   consistent with the class-driven feedback modal pattern. */
.ov2-contracts-overlay {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
}
.ov2-contracts-overlay.open { display: flex; }

.ov2-contracts-dialog {
  background: #ffffff;
  border-radius: 6px;
  width: 720px;
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.ov2-contracts-header {
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #0c1117;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.ov2-contracts-body {
  padding: 14px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ov2-contracts-body p {
  margin: 0;
  color: #4b5563;
  font-size: 0.78rem;
  line-height: 1.45;
}
.ov2-contracts-body code {
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-data, monospace);
  font-size: 0.72rem;
}
.ov2-contracts-textarea {
  width: 100%;
  height: 260px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 10px;
  font-family: var(--font-data, monospace);
  font-size: 0.72rem;
  line-height: 1.45;
  resize: vertical;
  color: #111827;
  background: #ffffff;
}
.ov2-contracts-textarea:focus {
  outline: none;
  border-color: #0c1117;
  box-shadow: 0 0 0 3px rgba(12, 17, 23, 0.08);
}
.ov2-contracts-status {
  font-size: 0.75rem;
  color: #374151;
  min-height: 1.2em;
}
.ov2-contracts-actions {
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f9fafb;
}
.ov2-contracts-btn {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ov2-contracts-btn.primary {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}
.ov2-contracts-btn.primary:hover  { background: #15803d; }
.ov2-contracts-btn.secondary {
  background: #ffffff;
  color: #374151;
}
.ov2-contracts-btn.secondary:hover { background: #f3f4f6; }