/* Styling with RSI color semantics: oversold=blue, overbought=red */
.rsi-scanner-app { font-family: system-ui, Arial, sans-serif; color:#e5e7eb; background:#0f172a; border:1px solid #1f2937; border-radius:12px; padding:14px }
.rsi-header h2 { margin: 6px 0 4px; font-size: 22px; }
.sub { color:#9ca3af; font-size:13px }
.rsi-row { display:grid; grid-template-columns:1fr 280px; gap:14px; margin-top:10px }
@media (max-width: 900px){ .rsi-row{ grid-template-columns:1fr } }
.input-group{ display:grid; gap:6px; margin:10px 0 }
textarea,input{ width:100%; background:#0b1220; border:1px solid #1f2937; border-radius:8px; color:#e5e7eb; padding:10px }
.inline{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start }
.btns{ display:flex; gap:6px; flex-wrap:wrap }
.btn{ background:#2563eb; border:none; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer }
.btn.tiny{ padding:6px 8px; font-size:12px }
.btn[disabled]{ opacity:.6; cursor:progress }
.status{ font-size:12px; color:#9ca3af; margin-left:8px }
.rsi-card{ background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:12px }
.table-wrap{ overflow:auto; max-height:60vh; margin-top:6px }
table{ width:100%; border-collapse:collapse; font-size:13px }
th,td{ padding:8px; border-bottom:1px solid #1f2937 } th{ color:#9ca3af; cursor:pointer }
.rsi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px }
@media (max-width: 900px){ .rsi-grid{ grid-template-columns:1fr } }
.flex{ display:flex; align-items:center; gap:8px } .between{ justify-content:space-between }
.small{ font-size:12px; color:#9ca3af } .title{ font-weight:700 }
.log-wrap{ margin-top:8px } .log{ max-height:160px; overflow:auto; background:#0b1220; border:1px dashed #1f2937; border-radius:8px; padding:8px }
.log .row{ display:flex; gap:8px; font-size:12px; margin-bottom:4px }
.log .ts{ color:#9ca3af; min-width:82px; font-family: ui-monospace, monospace }
.log .msg{ white-space:pre-wrap } .log .ok{ color:#a7f3d0 } .log .err{ color:#fecaca } .log .info{ color:#bfdbfe }

/* Pill styles */
.pill{ padding:2px 8px; border-radius:999px; font-weight:700; font-size:12px; display:inline-block; border:1px solid transparent }
.rsi-oversold{ background: rgba(59,130,246,.15); color:#bfdbfe; border-color: rgba(59,130,246,.35); }  /* BLUE for RSI<30 */
.rsi-overbought{ background: rgba(239,68,68,.15); color:#fecaca; border-color: rgba(239,68,68,.35); } /* RED for RSI>70 */
.rsi-neutral{ background: rgba(107,114,128,.12); color:#e5e7eb; border-color: rgba(107,114,128,.35); }  /* gray for 30–70 */

/* Debug badge */
#rsi-debug-badge{ position:fixed; right:10px; bottom:10px; background:#111827; border:1px solid #374151; border-radius:8px; padding:8px 10px; font-size:12px; color:#e5e7eb; z-index:99999; box-shadow:0 2px 12px rgba(0,0,0,.35) }
#rsi-debug-badge .row{ display:flex; gap:6px; align-items:center }
#rsi-debug-badge .dot{ width:8px; height:8px; border-radius:999px; background:#ef4444 }
#rsi-debug-badge .ok .dot{ background:#10b981 }
#rsi-debug-badge .warn .dot{ background:#f59e0b }
#rsi-debug-badge .muted{ color:#9ca3af }
#rsi-debug-badge .x{ margin-left:8px; cursor:pointer; color:#9ca3af }


/* Button group labels for stock universes */
.rsi-scanner-app .btn-group-label{
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
  margin: 6px 0 2px;
}

/* Stock universe buttons: 3-row layout */
.rsi-scanner-app .stock-btns{ display:flex; flex-direction:column; gap:8px; flex-wrap:nowrap; align-items:flex-start; max-width:280px }

/* Keep each universe's 3 buttons on a single line (match crypto section)
   by putting the label on its own line and the buttons in a 3-column grid. */
.rsi-scanner-app .stock-btns .btnrow{
  display:grid;
  grid-template-columns: repeat(3, max-content);
  gap:6px;
  align-items:center;
}
.rsi-scanner-app .stock-btns .btn-group-label{
  grid-column: 1 / -1;
  margin: 0 0 2px;
  min-width: unset;
}

/* Make stock symbol textarea taller for easier scanning */
.rsi-scanner-app textarea.stocksInput{ min-height: 160px; }