/* India Stock Screener — screener.in-inspired theme */
:root {
  --bg: #f7f9fc;
  --card: #ffffff;
  --border: #e4e8ee;
  --text: #1a1f2c;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --pos: #16a34a;
  --neg: #dc2626;
  --hover: #f1f5fb;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-y: scroll; overflow-x: hidden; } /* reserve scrollbar gutter + prevent horizontal scroll */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 1200px) { .wrap { padding: 0 28px; } }
@media (max-width: 768px)  { .wrap { padding: 0 18px; } }
@media (max-width: 480px)  { .wrap { padding: 0 12px; } }
/* Main content column should never force the body wider than the viewport.
   `min-width:0` is the canonical fix that lets flex/grid children shrink
   so an oversized table doesn't push the layout sideways. */
main.wrap.content { min-width: 0; }
main.wrap.content > * { min-width: 0; max-width: 100%; }
.muted { color: var(--muted); font-size: 0.92em; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* Top nav */
.topnav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: -webkit-sticky; position: sticky; top: 0; z-index: 50;
}
.topnav .wrap {
  display: flex; align-items: center; gap: 28px;
  height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #db2777 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.brand { white-space: nowrap; flex: 1 1 0; }
.topnav .search { flex: 1 1 0; display: flex; justify-content: flex-end; margin-left: 0; position: relative; }
.topnav .search input { width: 100%; max-width: 360px; }
.suggest { position: absolute; top: 100%; right: 0; margin-top: 4px; width: 360px; max-width: 90vw;
  background: #fff; border: 1px solid #d8dde5; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.18); z-index: 1000; max-height: 360px; overflow-y: auto; }
.suggest-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px;
  text-decoration: none; color: #0f172a; border-bottom: 1px solid #f1f5f9; }
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item.active { background: #eff6ff; }
.suggest-item .sg-tkr { font-weight: 700; color: #1e3a8a; min-width: 90px; }
.suggest-item .sg-name { color: #475569; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topnav nav { display: flex; gap: 6px; align-items: center; }
.topnav nav a,
.topnav nav .nav-dd-trigger {
  color: #334155; font-weight: 600; font-size: 15px;
  padding: 7px 12px; border-radius: 8px;
  background: #f1f5f9;
  transition: background .15s ease, color .15s ease;
}
.topnav nav > a:hover,
.topnav nav .nav-dd-trigger:hover,
.nav-dd:hover .nav-dd-trigger {
  color: var(--accent);
  background: #eef2ff;
  text-decoration: none;
}

/* Screens dropdown */
.nav-dd { position: relative; }
.nav-dd-trigger { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.dd-caret { font-size: 10px; transition: transform .15s ease; color: #64748b; }
.nav-dd:hover .dd-caret { transform: rotate(180deg); color: var(--accent); }
.nav-dd-menu {
  position: absolute; top: 100%; left: -8px; margin-top: 8px;
  min-width: 280px; background: #fff;
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 32px -10px rgba(15,23,42,.18);
  padding: 6px; z-index: 100;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 6px;
  font-size: 14px; font-weight: 600; color: #0f172a;
  text-decoration: none;
}
.nav-dd-menu a:hover { background: #f1f5f9; color: var(--accent); }
.nav-dd-menu a span { font-size: 12px; font-weight: 400; color: #64748b; }
.nav-dd-menu a:hover span { color: #475569; }

/* Spacer pushes the CTA tabs (Elite Club, HerAI) to the right edge */
.topnav nav .nav-spacer { flex: 1 1 auto; }

/* Eye-catching CTA tabs in the right corner of the nav */
.topnav a.nav-cta {
  font-size: 16px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 22px;
  color: #ffffff;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.topnav a.nav-cta:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  filter: brightness(1.05);
  text-decoration: none;
}
.topnav a.nav-cta-elite {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
}
.topnav a.nav-cta-herai {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #4f46e5 100%);
}
.topnav-row2 {
  display: flex; align-items: center; gap: 16px;
  height: 48px; border-top: 1px solid var(--border);
  background: #fafbfc;
}
.topnav-row2 .search { margin-left: auto; }
.topnav .search { margin-left: 12px; }
.topnav-row3 { display: flex; align-items: center; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--border); background: #fafbfc; }
.topnav input {
  width: 280px; padding: 9px 14px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 14px; outline: none;
}
.topnav input:focus { border-color: var(--accent); background: #fff; }

/* Content */
.content { padding: 28px 20px 60px; }
.hero h1 { margin: 0 0 6px; font-size: 28px; }
.hero { margin-bottom: 24px; }
.meta-pills { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 12px; font-size: 12.5px; color: var(--muted);
}

/* Screen groups */
.screen-group { margin: 36px 0; }
.screen-group h2 { margin: 0 0 4px; font-size: 18px; }
.screen-group > p.muted { margin: 0 0 14px; }
.screen-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.screen-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; color: var(--text); display: block;
  transition: border-color .15s, box-shadow .15s;
}
.screen-card:hover {
  text-decoration: none; border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(37,99,235,0.08);
}
.screen-card-name { font-weight: 600; margin-bottom: 4px; }
.screen-card-desc { color: var(--muted); font-size: 12.5px; min-height: 36px; }
.screen-card-count {
  margin-top: 8px; font-size: 12px; color: var(--accent); font-weight: 500;
}

/* Sectors */
.sector-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sector-tag {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; color: var(--text); font-size: 13px;
}
.sector-tag:hover { border-color: var(--accent); text-decoration: none; }

/* Tables */
.table-wrap { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: auto; max-width: 100%; max-height: calc(100vh - 200px); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.data-table th, .data-table td {
  padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: #fff;
}
.data-table th {
  background: #f9fafc; font-weight: 600; color: #374151; cursor: pointer;
  user-select: none; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.3px;
  position: sticky; top: 0; z-index: 3;
}
.data-table th:hover { background: #eef2f7; }
.data-table th.sort-asc::after { content: " ▲"; color: var(--accent); }
.data-table th.sort-desc::after { content: " ▼"; color: var(--accent); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover td { background: var(--hover); }

/* Freeze first two columns: # and Ticker */
.data-table thead th:nth-child(1),
.data-table tbody td:nth-child(1) {
  position: sticky; left: 0; z-index: 2;
  background: #f9fafc; box-shadow: 1px 0 0 var(--border);
}
.data-table tbody td:nth-child(1) { background: #fff; }
.data-table thead th:nth-child(2),
.data-table tbody td:nth-child(2) {
  position: sticky; left: 48px; z-index: 2;
  background: #f9fafc; box-shadow: 1px 0 0 var(--border);
}
.data-table tbody td:nth-child(2) { background: #fff; }
.data-table thead th:nth-child(1),
.data-table thead th:nth-child(2) { z-index: 4; }
.data-table tbody tr:hover td:nth-child(1),
.data-table tbody tr:hover td:nth-child(2) { background: var(--hover); }

.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--muted); }

/* Stock detail */
.stock-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}
.stock-header h1 { margin: 0; font-size: 24px; }
.ticker-badge {
  background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 600; vertical-align: middle; margin-left: 6px;
}
.price-block { text-align: right; }
.price { font-size: 28px; font-weight: 600; }
.kpi-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-bottom: 24px;
}
.kpi {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 14px;
}
.kpi-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.kpi-val { font-size: 16px; font-weight: 600; margin-top: 2px; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 18px 20px; margin-bottom: 20px;
}
.card h2 { margin: 0 0 12px; font-size: 16px; }
.business-summary { color: #374151; line-height: 1.6; }

.empty {
  background: #fff; border: 1px dashed var(--border); border-radius: 8px;
  padding: 40px; text-align: center; color: var(--muted);
}

/* Footer */
.footer {
  margin-top: 60px; padding: 24px 0; border-top: 1px solid var(--border);
  background: #fff; color: var(--muted); font-size: 12.5px;
}
.footer .wrap > div { margin: 2px 0; }

@media (max-width: 700px) {
  .topnav .wrap { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 12px; }
  .topnav input { width: 100%; }
  .topnav .search { width: 100%; margin-left: 0; }
  .stock-header { flex-direction: column; }
  .price-block { text-align: left; }
}

/* ===== screener.in-style stock detail ===== */
.company-head {
  display: flex; justify-content: space-between; gap: 20px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.company-head h1 { margin: 0 0 4px; font-size: 24px; }
.company-head-left { flex: 1; min-width: 0; }
.company-head-right { text-align: right; }
.company-head-right .small { font-size: 13px; }
.business-summary.clamp {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 760px;
}
.page-nav {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 13px;
}
.page-nav a { color: var(--muted); }
.page-nav a:hover { color: var(--accent); }

.ratio-tile {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px; margin-bottom: 18px;
}
.ratio-tile-title {
  margin: 0 0 12px 0; font-size: 13px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.ratio-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 24px;
}
.ratio-label {
  font-size: 11.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px;
}
.ratio-val { font-size: 16px; font-weight: 600; }

.proscons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 6px;
}
.proscons > div {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px;
}
.proscons h3 {
  margin: 0 0 8px; font-size: 13px; letter-spacing: 0.6px;
}
.pros h3 { color: var(--pos); }
.cons h3 { color: var(--neg); }
.proscons ul { margin: 0; padding-left: 18px; }
.proscons li { margin: 5px 0; line-height: 1.5; }
.small { font-size: 12.5px; }

.section { scroll-margin-top: 70px; }
.fin-table th, .fin-table td { padding: 7px 12px; font-size: 13px; }
.fin-table .row-label {
  text-align: left; font-weight: 500; background: #fafbfd;
  position: sticky; left: 0; z-index: 1; min-width: 180px;
}
.fin-table thead th { background: #f3f5f8; }
.fin-table tbody tr:nth-child(odd) { background: #fcfcfd; }
.fin-table tbody tr:hover { background: var(--hover); }

.peer-self { background: #eff6ff !important; font-weight: 600; }
.peer-self td { border-bottom-color: #bfdbfe; }

.growth-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.growth-tiles .card { margin-bottom: 0; padding: 14px 18px; }
.growth-tiles h3 {
  margin: 0 0 8px; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table td { padding: 4px 0; font-size: 14px; border: 0; }
.mini-table td:last-child { font-weight: 600; }

h3.sub { margin: 18px 0 8px; font-size: 14px; color: #374151; }

@media (max-width: 700px) {
  .proscons { grid-template-columns: 1fr; }
  .company-head { flex-direction: column; }
  .company-head-right { text-align: left; }
}

/* ===== Read more link + About slide-in panel ===== */
.read-more-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.4px;
}
.read-more-link:hover { color: var(--accent-dark); text-decoration: underline; }

.about-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
  z-index: 100;
}
.about-overlay.open { opacity: 1; visibility: visible; }

.about-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px; max-width: 92vw;
  background: #fff;
  box-shadow: -8px 0 30px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 110;
  display: flex; flex-direction: column;
}
.about-panel.open { transform: translateX(0); }

.about-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky; top: 0; z-index: 1;
}
.about-head h2 { margin: 2px 0 0; font-size: 20px; }
.about-eyebrow { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; }
.about-close {
  background: transparent; border: 0;
  font-size: 28px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 0 4px;
}
.about-close:hover { color: var(--text); }

.about-body {
  padding: 18px 24px 28px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px; line-height: 1.6;
}
.about-body h3 {
  margin: 22px 0 8px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #374151;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.about-body h3:first-child { margin-top: 0; }
.about-body p { margin: 0 0 10px; color: #374151; }
.about-facts { width: 100%; border-collapse: collapse; }
.about-facts td {
  padding: 6px 0; border-bottom: 1px dashed #eef1f5;
  font-size: 13.5px; vertical-align: top;
}
.about-facts td:first-child { color: var(--muted); width: 45%; }
.about-facts td:last-child { font-weight: 500; text-align: right; }
.about-facts a { word-break: break-all; }

/* ===== Universe toggle ===== */
.universe-toggle {
  display: inline-flex;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  flex-wrap: wrap;
}
.universe-toggle .u-btn {
  background: #fff;
  border: 0;
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
  color: #475569;
  border-right: 1px solid #e2e8f0;
  font-weight: 600;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.universe-toggle .u-btn:last-child { border-right: 0; }
.universe-toggle .u-btn:hover { background: #eef2ff; color: var(--accent); }
.universe-toggle .u-btn.active {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color: #fff;
}
/* Sector buttons inherit the same neutral look as index buttons. */
.universe-toggle .u-btn.u-sector { background: #fff; color: #475569; border-right-color: #e2e8f0; }
.universe-toggle .u-btn.u-sector:hover { background: #eef2ff; color: var(--accent); }
.universe-toggle .u-btn.u-sector.active {
  background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff;
}
.topnav .search { margin-left: 12px; }

/* ===== Index badges ===== */
.idx-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.4;
}
.idx-NIFTY50 { background: #ffedd5; color: #9a3412; }
.idx-AI  { background: #ede9fe; color: #6d28d9; }

/* ===== Setup tags (high-momentum screen) ===== */
.setup-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin: 1px 2px;
  white-space: nowrap;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.setup-breakout-52w, .setup-breakout-20d { background: #dcfce7; color: #14532d; border-color: #86efac; }
.setup-bounce-sma50, .setup-bounce-sma200 { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.setup-hammer, .setup-bullish-engulfing, .setup-morning-star, .setup-piercing { background: #fef3c7; color: #78350f; border-color: #fcd34d; }

/* ===== Conviction grade (technical screener) ===== */
.conv-grade {
  display: inline-block; min-width: 28px; text-align: center;
  font-weight: 800; font-size: 12px; padding: 3px 8px;
  border-radius: 6px; letter-spacing: .3px;
}
.conv-score { font-size: 11px; color: #64748b; margin-left: 4px; }
.conv-grade-aplus { background: linear-gradient(90deg, #16a34a, #15803d); color: #fff; }
.conv-grade-a { background: #dcfce7; color: #14532d; }
.conv-grade-b { background: #fef9c3; color: #713f12; }
.conv-grade-c { background: #fed7aa; color: #7c2d12; }
.conv-grade-d { background: #fee2e2; color: #7f1d1d; }
.row-grade-aplus { background: rgba(22,163,74,0.06); }
.row-grade-a { background: rgba(22,163,74,0.025); }
.daily-tag { font-size: 14px; }
.daily-tag.daily-up { filter: hue-rotate(0deg); }
.daily-tag.daily-warn { opacity: .6; }

/* ===== Pattern Scanner (technical.html) ===== */
.pattern-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.pattern-results { min-width: 0; }
.pattern-results .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pattern-sidebar {
  border-right: 1px solid var(--border); padding-right: 14px;
  max-height: 78vh; overflow-y: auto;
}
.pattern-search {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; margin-bottom: 12px;
}
.pattern-group { margin-bottom: 14px; }
.pattern-group-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: #64748b; letter-spacing: .5px; padding: 0 4px 6px;
}
.pattern-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 8px;
  padding: 7px 10px; margin: 2px 0;
  background: transparent; border: 0; border-radius: 6px;
  text-align: left; cursor: pointer;
  font-size: 13px; color: #334155; font-family: inherit;
  transition: background .12s ease, color .12s ease;
}
.pattern-btn:hover { background: #f1f5f9; color: var(--accent); }
.pattern-btn.active { background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff; font-weight: 600; }
.pattern-btn.active .pattern-count { background: rgba(255,255,255,.25); color: #fff; }
.pattern-label { flex: 1; line-height: 1.3; }
.pattern-count {
  background: #e2e8f0; color: #475569;
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px; min-width: 22px; text-align: center;
}
.pattern-results-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.pattern-title { margin: 0; font-size: 20px; }
.pattern-theory {
  margin: 0 0 16px; padding: 12px 14px;
  background: #fafbff; border: 1px solid var(--border);
  border-left: 3px solid #4f46e5; border-radius: 6px;
}
.pattern-theory > summary {
  cursor: pointer; outline: none; list-style: none;
  font-size: 14px; color: #1e293b; user-select: none;
}
.pattern-theory > summary::-webkit-details-marker { display: none; }
.pattern-theory > summary::before {
  content: '\25BC '; font-size: 10px; color: #64748b;
}
.pattern-theory:not([open]) > summary::before { content: '\25B6 '; }
.pattern-theory-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px; margin-top: 10px;
}
.pattern-theory .pt-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #4f46e5; margin-bottom: 2px;
}
.pattern-theory .pt-b {
  font-size: 13px; line-height: 1.5; color: #334155;
}
.ago-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.ago-badge.ago-today { background: #dcfce7; color: #166534; }
.ago-badge.ago-fresh { background: #dbeafe; color: #1e40af; }
.ago-badge.ago-old   { background: #f1f5f9; color: #475569; }
.score-badge {
  display: inline-block; min-width: 32px; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 700; text-align: center; cursor: help;
  font-variant-numeric: tabular-nums;
}
.score-badge.score-hi   { background: #14532d; color: #ecfdf5; }
.score-badge.score-good { background: #16a34a; color: #fff; }
.score-badge.score-mid  { background: #fef3c7; color: #92400e; }
.score-badge.score-low  { background: #fee2e2; color: #991b1b; }
.score-badge.score-na   { background: #e5e7eb; color: #475569; }
@media (max-width: 800px) {
  .pattern-shell { grid-template-columns: 1fr; }
  .pattern-sidebar { max-height: none; border-right: 0; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 14px; }
}

/* ===== AI Exposure section in About panel ===== */
.ai-section-title {
  margin-top: 20px;
  display: flex; align-items: center; gap: 8px;
}
.ai-badge {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
}
.ai-facts td:last-child {
  text-align: left;
  font-weight: 400;
  white-space: normal;
}
.ai-facts td:first-child {
  width: 35%;
  vertical-align: top;
  font-weight: 600;
  color: #6d28d9;
}

/* ===== Business / Company Profile in About panel ===== */
.cp-section-title {
  margin-top: 22px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cp-block {
  margin: 14px 0 18px 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cp-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.cp-block-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text);
}
.cp-asof {
  font-size: 11px; color: var(--muted); font-style: italic;
}
.cp-bars { list-style: none; padding: 0; margin: 0; }
.cp-bars li { margin: 6px 0; }
.cp-bar-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; margin-bottom: 3px;
}
.cp-bar-label { color: var(--text); }
.cp-bar-val { font-weight: 600; color: #2563eb; font-variant-numeric: tabular-nums; }
.cp-bar-track {
  height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden;
}
.cp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 3px;
}
.cp-share-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.cp-share-table th, .cp-share-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left;
}
.cp-share-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 600;
}
.cp-share-table td.num, .cp-share-table th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.cp-highlights { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.cp-highlights li { margin: 6px 0; }
.cp-focus { font-size: 13px; line-height: 1.55; margin: 0; }

/* ===== Analyst View enhancements ===== */
.rec-dist { margin-top: 8px; }
.rec-bar {
  display: flex; width: 100%; height: 22px;
  border-radius: 6px; overflow: hidden;
  background: #f1f5f9; border: 1px solid var(--border);
}
.rec-seg {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  min-width: 0; transition: filter 0.15s;
}
.rec-seg:hover { filter: brightness(1.08); }
.rec-strongbuy   { background: #15803d; }
.rec-buy         { background: #22c55e; }
.rec-hold        { background: #94a3b8; }
.rec-sell        { background: #f97316; }
.rec-strongsell  { background: #dc2626; }
.rec-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 8px; font-size: 12px; color: var(--muted);
}
.rec-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
i.rec-dot.rec-strongbuy   { background: #15803d; }
i.rec-dot.rec-buy         { background: #22c55e; }
i.rec-dot.rec-hold        { background: #94a3b8; }
i.rec-dot.rec-sell        { background: #f97316; }
i.rec-dot.rec-strongsell  { background: #dc2626; }
.analyst-table th, .analyst-table td { padding: 8px 10px; }
.act-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.act-up    { background: #dcfce7; color: #15803d; }
.act-down  { background: #fee2e2; color: #b91c1c; }
.act-neu   { background: #e2e8f0; color: #475569; }

/* ===== External chart icons (Robinhood / TradingView) ===== */
.chart-icon {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  vertical-align: middle;
  border: 1px solid transparent;
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
}
.chart-icon:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.15); filter: brightness(1.05); }
.chart-icon svg { display: block; }
.chart-icon-rh {
  background: #00c805; color: #fff;
}
.chart-icon-rh:hover { background: #00b805; color: #fff; }
.chart-icon-letter {
  font-weight: 800; font-size: 12px; line-height: 1;
  letter-spacing: 0; padding: 0 1px;
}
.chart-icon-tv {
  background: #2962ff; color: #fff;
}
.chart-icon-tv:hover { background: #1e54e8; color: #fff; }
.chart-icon-sc {
  background: #f59e0b; color: #fff;
}
.chart-icon-sc:hover { background: #d97706; color: #fff; }
@media (max-width: 600px) {
  .chart-icon span { display: none; }
  .chart-icon { padding: 5px 7px; }
}

/* Trend button */
.chart-icon-trend {
  background: #7c3aed; color: #fff; cursor: pointer;
  border: 0; font-family: inherit;
}
.chart-icon-trend:hover { background: #6d28d9; color: #fff; }

/* Price-chart heading row */
.chart-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 8px;
}
.chart-head h2 { margin: 0; }
.chart-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Technical Trend panel */
.trend-panel {
  margin-top: 16px; padding: 14px;
  background: #faf5ff; border: 1px solid #e9d5ff;
  border-radius: 8px;
}
.trend-panel h3 { margin: 0 0 4px; color: #6d28d9; }
.trend-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.trend-row {
  display: grid;
  grid-template-columns: 200px 130px 1fr;
  gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px;
}
.trend-frame-name { font-weight: 700; color: var(--text); }
.trend-verdict {
  text-align: center; padding: 5px 10px;
  border-radius: 5px; font-weight: 700; font-size: 13px;
}
.trend-up-strong   { background: #dcfce7; color: #14532d; }
.trend-up          { background: #ecfdf5; color: #166534; }
.trend-side        { background: #f3f4f6; color: #374151; }
.trend-down        { background: #fef2f2; color: #991b1b; }
.trend-down-strong { background: #fee2e2; color: #7f1d1d; }
.trend-na          { background: #f3f4f6; color: #6b7280; }
.trend-reasons {
  margin: 0; padding-left: 18px;
  font-size: 12px; color: #4b5563;
  display: flex; flex-wrap: wrap; gap: 0 16px;
}
.trend-reasons li { list-style: disc; }

@media (max-width: 700px) {
  .trend-row { grid-template-columns: 1fr; gap: 6px; }
  .trend-verdict { justify-self: start; }
}

/* ===== Technical Screener page ===== */
.screen-card-feature {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff; border-color: transparent;
}
.screen-card-feature .screen-card-name,
.screen-card-feature .screen-card-desc,
.screen-card-feature .screen-card-count {
  color: #fff;
}
.screen-card-feature .screen-card-desc { opacity: 0.92; }
.screen-card-feature:hover { filter: brightness(1.05); transform: translateY(-1px); }

.trend-pill, .rec-pill {
  display: inline-block; padding: 3px 9px;
  border-radius: 4px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
.trend-up-strong   { background: #dcfce7; color: #14532d; }
.trend-up          { background: #ecfdf5; color: #166534; }
.trend-side        { background: #f3f4f6; color: #374151; }
.trend-down        { background: #fef2f2; color: #991b1b; }
.trend-down-strong { background: #fee2e2; color: #7f1d1d; }
.rec-up   { background: #dcfce7; color: #14532d; }
.rec-side { background: #fef3c7; color: #92400e; }
.rec-down { background: #fee2e2; color: #7f1d1d; }

.chart-links-cell { white-space: nowrap; }
.chart-links-cell .chart-icon {
  margin-left: 0; margin-right: 4px;
  padding: 3px 6px; gap: 0;
}
.chart-links-cell .chart-icon span { display: none; }

/* ===== Sticky top horizontal scrollbar for wide tables ===== */
.sticky-hscroll {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(2px);
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
}
.sticky-hscroll::-webkit-scrollbar { height: 12px; }
.sticky-hscroll::-webkit-scrollbar-track { background: #f3f4f6; }
.sticky-hscroll::-webkit-scrollbar-thumb {
  background: #9ca3af; border-radius: 6px; border: 2px solid #f3f4f6;
}
.sticky-hscroll::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* Make sure the table wrapper still scrolls horizontally too */
.table-wrap { overflow-x: auto; }
.table-wrap::-webkit-scrollbar { height: 12px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #9ca3af; border-radius: 6px; border: 2px solid #f3f4f6;
}

/* ===== Help page ===== */
.help-controls {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.help-label { font-weight: 600; color: var(--text); }
.help-select {
  flex: 1; min-width: 280px; max-width: 520px;
  padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; font-size: 14px; font-family: inherit;
}
.help-select:focus { outline: none; border-color: var(--accent); }
.topic-body { line-height: 1.65; color: #1f2937; max-width: 880px; }
.topic-body h2 {
  margin: 0 0 6px; font-size: 22px;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topic-body h3 {
  margin: 22px 0 8px; font-size: 16px; color: var(--text);
  border-left: 3px solid var(--accent); padding-left: 10px;
}
.topic-body p, .topic-body li { font-size: 14px; }
.topic-body ul, .topic-body ol { padding-left: 22px; }
.topic-body li { margin-bottom: 4px; }
.topic-body blockquote {
  border-left: 4px solid #7c3aed; background: #faf5ff;
  margin: 14px 0; padding: 10px 16px; border-radius: 4px;
  font-style: italic; color: #4c1d95;
}
.topic-body table.about-facts { width: 100%; margin: 10px 0; }
.topic-body table.about-facts td:first-child { width: 220px; }

/* ===== Learn (Varsity-style) ===== */
.learn-hero {
  text-align: center; padding: 32px 0 18px;
  border-bottom: 1px solid var(--border); margin-bottom: 26px;
}
.learn-hero h1 {
  font-size: 32px; margin: 0 0 10px;
  background: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.learn-sub { color: #475569; max-width: 720px; margin: 0 auto; font-size: 15px; }

.module-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px; margin: 22px 0 32px;
}
.module-card {
  display: flex; gap: 14px; padding: 18px; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; text-decoration: none; color: inherit;
  transition: all .15s ease;
}
.module-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -10px rgba(37,99,235,.25); border-color: #c7d2fe; }
.mc-num {
  flex: 0 0 44px; height: 44px; width: 44px; border-radius: 10px;
  background: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.mc-body { flex: 1; }
.mc-body h3 { margin: 0 0 4px; font-size: 16px; color: #0f172a; }
.mc-meta { font-size: 12px; color: #7c3aed; font-weight: 600; margin-bottom: 6px; }
.mc-body p { margin: 0 0 10px; font-size: 13.5px; color: #475569; line-height: 1.5; }
.mc-cta { font-size: 13px; color: #2563eb; font-weight: 600; }

.learn-foot {
  background: #f8fafc; border: 1px solid var(--border); padding: 18px 22px;
  border-radius: 10px; margin-top: 28px;
}
.learn-foot h3 { margin-top: 0; }
.learn-foot ol { padding-left: 22px; }
.learn-foot li { margin-bottom: 6px; }

/* Module pages */
.learn-crumbs { font-size: 12.5px; color: #64748b; margin-bottom: 10px; }
.learn-crumbs a { color: #2563eb; text-decoration: none; }
.learn-crumbs a:hover { text-decoration: underline; }
.mod-hero {
  padding: 18px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 22px;
}
.mod-hero h1 {
  font-size: 28px; margin: 0 0 8px;
  background: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mod-sub { color: #475569; font-size: 15px; max-width: 820px; line-height: 1.5; margin: 0; }

.mod-shell {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 30px;
}
.mod-shell > *:nth-child(2) { min-width: 0; }
@media (max-width: 900px) { .mod-shell { grid-template-columns: 1fr; } }

.mod-toc {
  position: sticky; top: 12px; align-self: start;
  border: 1px solid var(--border); border-radius: 8px; padding: 14px;
  background: #fff; max-height: calc(100vh - 24px); overflow-y: auto;
}
.mod-toc-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #7c3aed; font-weight: 700; margin-bottom: 10px; }
.mod-toc ol { padding-left: 20px; margin: 0; }
.mod-toc li { font-size: 13px; margin-bottom: 6px; line-height: 1.4; }
.mod-toc a { color: #1e293b; text-decoration: none; }
.mod-toc a:hover { color: #2563eb; }

.mod-body { line-height: 1.65; color: #1f2937; min-width: 0; }
.mod-body section { padding: 16px 0 22px; border-bottom: 1px dashed #e2e8f0; }
.mod-body section:last-child { border-bottom: 0; }
.mod-body h2 {
  margin: 0 0 12px; font-size: 22px;
  background: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mod-body h3 {
  margin: 18px 0 8px; font-size: 16px; color: var(--text);
  border-left: 3px solid #7c3aed; padding-left: 10px;
}
.mod-body p, .mod-body li { font-size: 14px; }
.mod-body ul, .mod-body ol { padding-left: 22px; }
.mod-body li { margin-bottom: 4px; }
.mod-body blockquote {
  border-left: 4px solid #7c3aed; background: #faf5ff;
  margin: 14px 0; padding: 10px 16px; border-radius: 4px;
  font-style: italic; color: #4c1d95;
}
.mod-body table.info-table, .mod-body table.etf-table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0 14px;
}
.mod-body table.info-table th, .mod-body table.etf-table th {
  text-align: left; background: #f1f5f9; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.mod-body table.info-table td, .mod-body table.etf-table td {
  padding: 7px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: top;
}
.mod-body table.etf-table td:nth-child(1) { font-weight: 700; color: #2563eb; width: 78px; }

.chart-box { height: 280px; margin: 14px 0 6px; position: relative; }
.caption { color: #64748b; font-size: 12.5px; font-style: italic; margin: 4px 0 8px; }

/* candle visuals */
.candle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; margin: 12px 0; }
.candle-card { text-align: center; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.candle-card .cap { font-size: 12px; color: #475569; margin-top: 6px; }
.candle { position: relative; width: 22px; height: 70px; margin: 0 auto; }
.candle .wick { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #475569; transform: translateX(-50%); }
.candle .body { position: absolute; left: 0; right: 0; height: 36px; top: 17px; border-radius: 2px; }
.candle.bull .body { background: #10b981; }
.candle.bear .body { background: #dc2626; }
.candle.tall .body { height: 56px; top: 7px; }
.candle.small .body { height: 14px; top: 28px; }
.candle.hammer .body { height: 14px; top: 14px; background: #10b981; }
.candle.hammer .wick { background: linear-gradient(to bottom, #475569 0 28px, #475569 28px 100%); }
.candle.shoot .body { height: 14px; top: 42px; background: #dc2626; }
.candle.doji .body { height: 4px; top: 33px; background: #475569; }

/* bid/ask widget */
.bid-ask {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; margin: 14px 0;
}
.ba-side { padding: 10px 18px; border-radius: 6px; min-width: 120px; text-align: center; }
.ba-side.bid { background: #dcfce7; color: #14532d; }
.ba-side.ask { background: #fee2e2; color: #7f1d1d; }
.ba-label { font-size: 11px; letter-spacing: .08em; }
.ba-price { font-size: 22px; font-weight: 700; }
.ba-size { font-size: 11.5px; opacity: .8; }
.ba-mid { font-size: 12px; color: #475569; }

/* calculators */
.calc-card {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin: 14px 0;
}
.calc-card h3 { margin-top: 0; border-left: 0; padding-left: 0; color: #2563eb; }
.calc-row {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin-bottom: 12px;
}
.calc-row label { font-size: 12.5px; font-weight: 600; color: #1e293b; display: flex; flex-direction: column; gap: 4px; }
.calc-row input, .calc-row select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13.5px; font-family: inherit; background: #fff; min-width: 130px;
}
.calc-row input:focus, .calc-row select:focus { outline: none; border-color: var(--accent); }
.calc-row button {
  padding: 8px 18px; background: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  color: #fff; border: 0; border-radius: 6px; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
}
.calc-row button:hover { opacity: .92; }
.calc-summary { background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; font-size: 14px; line-height: 1.7; }
.calc-summary div + div { border-top: 1px dashed #e2e8f0; padding-top: 6px; margin-top: 6px; }
.calc-summary .muted { color: #64748b; font-size: 12px; font-style: italic; }

.sec-checks { list-style: none; padding-left: 0; }
.sec-checks li { padding: 4px 0; }
.sec-checks input { margin-right: 8px; }

.ips {
  background: #fff; border: 2px solid #7c3aed; border-radius: 10px;
  padding: 16px 20px; margin: 14px 0; box-shadow: 0 4px 14px -8px rgba(124,58,237,.4);
}
.ips ol { padding-left: 22px; margin-bottom: 0; }

/* ===== Custom Screen ===== */
.rule-row {
  display: grid;
  grid-template-columns: 2fr 100px 1fr 36px;
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}
.rule-row select, .rule-row input[type=number] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}
.rule-row select:focus, .rule-row input:focus { border-color: var(--accent); }
.r-del {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--neg);
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  height: 32px;
  line-height: 1;
}
.r-del:hover { background: #fef2f2; border-color: var(--neg); }

.cs-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap;
}
.btn-primary {
  background: var(--accent); color: #fff; border: 0;
  padding: 8px 16px; border-radius: 6px;
  font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost {
  background: #fff; color: var(--text); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 6px;
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.btn-ghost:hover { background: var(--hover); }

.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 14px;
  font-size: 12.5px; cursor: pointer; color: var(--text);
  font-family: inherit;
}
.chip:hover { background: #eff6ff; border-color: var(--accent); color: var(--accent); }

#sortKey, #sortDir {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: #fff; font-size: 13px; font-family: inherit;
}

@media (max-width: 700px) {
  .rule-row { grid-template-columns: 1fr 80px 1fr 32px; gap: 6px; }
}

/* ===== News page ===== */
.news-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.news-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.news-tab {
  background: #fff; border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 18px;
  font-size: 13px; cursor: pointer; color: var(--text);
  font-family: inherit; font-weight: 500;
}
.news-tab:hover { background: #eff6ff; border-color: var(--accent); color: var(--accent); }
.news-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.news-actions { display: flex; align-items: center; gap: 12px; }

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.news-item {
  display: flex; gap: 12px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.news-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-color: var(--accent); }
.news-thumb {
  flex: 0 0 96px; width: 96px; height: 72px;
  border-radius: 6px; overflow: hidden; background: #f3f4f6;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.news-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; color: #6b7280; flex-wrap: wrap;
}
.news-cat {
  font-weight: 700; padding: 2px 7px; border-radius: 3px; font-size: 10px;
}
.news-cat-markets   { background: #dbeafe; color: #1e40af; }
.news-cat-ai        { background: #ede9fe; color: #5b21b6; }
.news-cat-macro     { background: #fef3c7; color: #92400e; }
.news-cat-business  { background: #dcfce7; color: #166534; }
.news-cat-earnings  { background: #fee2e2; color: #991b1b; }
.news-cat-ipo       { background: #ffedd5; color: #9a3412; }
.earnings-row .news-body { width: 100%; }
.earnings-date { color: #334155; font-weight: 600; font-size: 0.85rem; }
.earnings-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; font-size: 0.92rem; }
.earnings-stats .pos { color: #047857; }
.earnings-stats .neg { color: #b91c1c; }
.news-source { font-weight: 600; color: #374151; }
.news-time { color: #9ca3af; }
.news-title {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  text-decoration: none; line-height: 1.35;
}
.news-title:hover { color: var(--accent); }
.news-desc {
  font-size: 12.5px; color: #6b7280; margin: 2px 0 0;
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.chart-select{padding:4px 8px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:13px;}

.tf-bar { display:inline-flex; gap:2px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; padding:2px; margin-right:8px; }
.tf-btn { background:transparent; border:0; padding:5px 10px; font-size:12px; font-weight:600; color:#475569; border-radius:6px; cursor:pointer; }
.tf-btn:hover { background:#e2e8f0; color:#1e293b; }
.tf-btn.active { background:#2563eb; color:#fff; }
.chart-meta { font-size:13px; margin:6px 0 10px 0; }
.chart-meta .pos { color:#16a34a; }
.chart-meta .neg { color:#dc2626; }

/* ===== Generic table filter bar (Mkt Cap / P/E / ROCE) ===== */
.tbl-filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px;
  padding: 10px 14px; margin: 0 0 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.tbl-filter-title {
  font-size: 12px; font-weight: 700; color: #374151;
  text-transform: uppercase; letter-spacing: .4px; padding-bottom: 6px;
}
.tbl-filter-field { display: flex; flex-direction: column; gap: 4px; }
.tbl-filter-field label {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}
.tbl-filter-inputs { display: flex; gap: 6px; }
.tbl-filter-inputs input {
  width: 110px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; outline: none; background: #fff;
}
.tbl-filter-inputs input:focus { border-color: var(--accent); }
.tbl-filter-clear {
  padding: 6px 12px; border: 1px solid var(--border); background: #fff;
  border-radius: 6px; font-size: 12.5px; cursor: pointer; color: #374151;
}
.tbl-filter-clear:hover { border-color: var(--accent); color: var(--accent); }
.tbl-filter-count { margin-left: auto; align-self: center; }

/* Row hide classes (universe + numeric filter compose via either class). */
.u-hidden, .f-hidden { display: none !important; }

/* ---- Market Dashboard ---- */
.ticker-strip { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; padding:6px 2px; }
@media (max-width: 900px) { .ticker-strip { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ticker-tile { min-width:0; padding:10px 12px; border:1px solid #d8dde5; border-radius:10px; background:#ffffff; color:#0f172a; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.ticker-tile.clickable { cursor:pointer; }
.ticker-tile.clickable:hover { border-color:#3a82f7; transform:translateY(-2px); box-shadow:0 6px 20px rgba(58,130,247,.18); }
.ticker-tile .tt-label { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#64748b; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticker-tile .tt-price { font-size:20px; font-weight:700; margin:4px 0 2px; line-height:1.1; color:#0f172a; }
.ticker-tile .tt-change { font-size:13px; font-weight:600; }
.ticker-tile .tt-change.pos { color:#15803d; }
.ticker-tile .tt-change.neg { color:#b91c1c; }
.ticker-tile .tt-meta { font-size:11px; margin-top:6px; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticker-tile .tt-meta strong { color:#0f172a; font-weight:700; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns:1fr; } }

/* ---------- Macro/Micro sentiment regime (visual-first) ---------- */

/* Dark container so inner dark cards + light text pop properly */
#sentimentSection {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  color: #e2e8f0;
}
#sentimentSection .card-head h2 { color: #f1f5f9; }
#sentimentSection .card-head .muted { color: #94a3b8; }

/* Overall stance strip */
.overall-strip { display:flex; align-items:center; gap:18px; padding:14px 18px; border-radius:10px;
                 background:linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%);
                 border-left:5px solid var(--c, #94a3b8); margin:8px 0 16px; }
.overall-score { font-size:38px; font-weight:900; color:var(--c); line-height:1;
                 min-width:80px; text-align:center; letter-spacing:-1px; }
.overall-meta { flex:1; }
.overall-kicker { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#94a3b8; font-weight:600; }
.overall-label { font-size:20px; font-weight:800; margin:2px 0 4px; }
.overall-stance { font-size:13px; color:#cbd5e1; line-height:1.5; }
@media (max-width: 700px) {
  .overall-strip { flex-direction:column; align-items:flex-start; }
  .overall-score { font-size:32px; }
}

/* Two-up sentiment cards */
.sentiment-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 720px) { .sentiment-grid { grid-template-columns:1fr; } }
.sent-card { background:rgba(30,41,59,0.60); border:1px solid rgba(71,85,105,0.45); border-radius:12px; padding:16px 18px; }

/* Color-coded subheading */
.sent-h { margin:0; font-size:16px; font-weight:800; letter-spacing:-0.2px; }
.sent-sub { margin:2px 0 6px; color:#94a3b8; }

/* SVG half-circle gauge */
.sent-viz { display:flex; justify-content:center; padding:6px 0 4px; }
.halfgauge { width:100%; max-width:280px; height:auto; }

/* Indicator chip grid — visual bars instead of text walls */
.ichip-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
@media (max-width: 600px) { .ichip-grid { grid-template-columns:1fr; } }
.ichip { padding:9px 11px; border-radius:8px; background:rgba(51,65,85,0.50); border-left:3px solid #475569; }
.ichip.tone-good { border-left-color:#22c55e; }
.ichip.tone-warn { border-left-color:#f59e0b; }
.ichip.tone-bad  { border-left-color:#ef4444; }
.ichip-head { display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.ichip-label { font-size:11px; color:#60a5fa; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ichip-bump  { font-size:11px; font-weight:800; }
.ichip-value { font-size:14px; font-weight:700; color:#f1f5f9; margin-top:2px; }
.ichip-value .ichip-chg { font-size:11px; font-weight:600; margin-left:4px; }
.ichip-value .ichip-chg.pos { color:#4ade80; }
.ichip-value .ichip-chg.neg { color:#f87171; }
.ichip-mini { margin:6px 0 4px; }
.ichip-mini-track { position:relative; height:6px; background:rgba(148,163,184,0.22); border-radius:3px; overflow:hidden; }
.ichip-mini-center { position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(226,232,240,0.35); z-index:1; }
.ichip-mini-fill { position:absolute; top:0; bottom:0; border-radius:3px; min-width:2px; }
.ichip-tag { font-size:11px; font-weight:600; }
.ichip-why { font-size:11px; color:#94a3b8; line-height:1.4; margin-top:4px; font-style:italic; }

/* Indicator reference list (expandable under each sentiment card) */
.ind-ref { margin-top:14px; padding-top:10px; border-top:1px dashed rgba(71,85,105,0.4); }
.ind-ref-title { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#60a5fa;
                 font-weight:700; cursor:pointer; list-style:none; padding:2px 0; }
.ind-ref-title::-webkit-details-marker { display:none; }
.ind-ref-title::before { content:"\25B8 "; font-size:10px; }
details[open] > .ind-ref-title::before { content:"\25BE "; }
.ind-ref-list { margin:8px 0 0; padding:0 0 0 16px; display:grid; gap:5px; }
.ind-ref-list li { font-size:11px; color:#94a3b8; line-height:1.45; }
.ind-ref-list li strong { color:#cbd5e1; font-weight:700; }
.ind-ref-list li.live { color:#cbd5e1; }
.ind-ref-list li.live::marker { color:#4ade80; }
.ind-ref-list li.live strong { color:#4ade80; }

/* Legend strip */
.legend-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; padding-top:10px;
              border-top:1px dashed rgba(71,85,105,0.5); font-size:11px; color:#94a3b8; }
.lg-item { display:inline-flex; align-items:center; gap:6px; }
.lg-sw { display:inline-block; width:12px; height:12px; border-radius:3px; }
.card-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.card-head h2 { margin:0; }
.news-list.compact .news-item { padding:8px 0; border-bottom:1px solid var(--border,#2a2f3a); }
.news-list.compact .news-item:last-child { border-bottom:none; }
.news-list.compact .news-item a { font-weight:500; line-height:1.3; }
.data-table.compact th, .data-table.compact td { padding:6px 8px; font-size:13px; }
.data-table .r { text-align:right; }
.data-table tr.clickable { cursor:pointer; }
.data-table tr.clickable:hover { background:rgba(58,130,247,.08); }

/* Index chart modal */
.modal-overlay { position:fixed; inset:0; background:rgba(5,8,14,.78); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-overlay.show { display:flex; }
.modal-card { background:var(--card-bg,#181b22); border:1px solid var(--border,#2a2f3a); border-radius:12px; max-width:920px; width:100%; max-height:90vh; padding:18px 20px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.modal-title { font-size:20px; font-weight:600; }
.btn-close { background:none; border:none; color:var(--muted,#8a93a4); font-size:28px; cursor:pointer; line-height:1; padding:0 6px; }
.btn-close:hover { color:#fff; }
.idx-chart { width:100%; height:340px; display:block; }

/* Market breadth */
.breadth-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:12px; }
@media (max-width: 700px) { .breadth-row { grid-template-columns:repeat(2,1fr); } }
.breadth-tile { padding:12px 14px; border:1px solid var(--border,#2a2f3a); border-radius:8px; background:var(--card-bg,#181b22); }
.breadth-tile.pos { border-left:3px solid #22c55e; }
.breadth-tile.neg { border-left:3px solid #ef4444; }
.breadth-tile .bt-label { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#8a93a4); font-weight:600; }
.breadth-tile .bt-val { font-size:22px; font-weight:700; margin-top:4px; }
.breadth-bar { height:10px; background:#ef4444; border-radius:5px; overflow:hidden; }
.breadth-bar-fill { height:100%; background:#22c55e; }

/* Exchange holiday calendar */
#marketCalendar {
  background:linear-gradient(180deg, #fffdf6 0%, #fff8e8 100%);
  border:1px solid #f3dcc0;
  box-shadow:0 14px 32px rgba(161, 98, 7, .08);
}
#marketCalendar .card-head h2 { color:#7c2d12; }
#marketCalendar .card-head .muted.small { color:#9a3412; }
.cal-closed-banner { display:flex; align-items:center; gap:8px; padding:10px 16px; margin-bottom:14px;
  border-radius:8px; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35);
  color:#fbbf24; font-weight:600; font-size:14px; }
.cal-closed-icon { font-size:18px; }
.cal-list { display:flex; flex-direction:column; gap:8px; }
.cal-tile { display:flex; align-items:center; gap:12px; padding:10px 14px;
  border:1px solid #efd7bb; border-radius:10px; background:linear-gradient(180deg, #fffaf0 0%, #fff4df 100%);
  box-shadow:0 8px 18px rgba(120, 53, 15, .06); }
.cal-tile.cal-today { border-color:#f59e0b; background:linear-gradient(180deg, #fff2cc 0%, #ffe6ad 100%); }
.cal-date { min-width:44px; text-align:center; font-size:22px; font-weight:800; line-height:1.1; color:#9a3412; }
.cal-date .cal-month { display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:#b45309; margin-top:2px; }
.cal-name { font-size:13px; font-weight:600; color:#7c2d12; }
.cal-day { font-size:11px; color:#9a3412; }

/* Ad slot placeholder (replace inner content with AdSense code) */
.ad-slot { display:flex; align-items:center; justify-content:center; min-height:280px; }
.ad-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  min-height:250px; border:2px dashed var(--border,#2a2f3a); border-radius:8px; }
.ad-placeholder-inner { display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--muted,#8a93a4); font-size:13px; }
.ad-placeholder-icon { font-size:24px; opacity:.5; }
/* When AdSense is active, hide the placeholder and show the ad */
.ad-slot ins.adsbygoogle { display:block; width:100%; }
.ad-slot ins.adsbygoogle + .ad-placeholder { display:none; }

/* In-content ad (between sections) */
.ad-inline { margin:18px 0; min-height:100px; }
/* Footer leaderboard ad */
.ad-footer { margin:24px auto 0; }
.ad-leaderboard { min-height:90px; }

/* Global auth badge (top-right, all pages) */
.global-auth-badge { display:flex; align-items:center; margin-left:10px; flex-shrink:0; }
.gab-link { display:flex; align-items:center; text-decoration:none; }
.gab-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid #3b82f6; }
.gab-letter { width:30px; height:30px; border-radius:50%; background:#3b82f6; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.ad-leaderboard .ad-placeholder { min-height:90px; }

/* Generic small badge (used by IPO calendar, etc.) */
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px;
  font-weight:600; letter-spacing:.04em; background:#374151; color:#e5e7eb; }
.badge.pos { background:#16a34a; color:#fff; }
.badge.neg { background:#dc2626; color:#fff; }

/* Participant-wise table net-highlight cells */
.net-hi.pos { background:rgba(34,197,94,0.18); color:#22c55e; border-radius:4px; }
.net-hi.neg { background:rgba(239,68,68,0.18); color:#ef4444; border-radius:4px; }
.grp-l { border-left:2.5px solid rgba(100,116,139,0.45) !important; }
#participant-oi th, #participant-oi td { position:static !important; box-shadow:none !important; }

/* ============== Earnings Calendar ============== */
.earn-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.earn-summary { display:flex; gap:18px; flex-wrap:wrap; margin:8px 0 14px; color:#9ca3af; font-size:13px; }
.earn-summary strong { color:#e5e7eb; font-size:15px; margin-right:4px; }
.earn-search { padding:6px 10px; border:1px solid #2a3142; border-radius:8px; background:#0f1218; color:#e5e7eb; min-width:200px; }
.earn-table th { cursor:pointer; user-select:none; }
.earn-table th[data-sort]:after { content:' \2195'; opacity:.4; font-size:11px; }
.earn-table th.sort-asc:after  { content:' \25B2'; opacity:1; }
.earn-table th.sort-desc:after { content:' \25BC'; opacity:1; }
.earn-when { display:inline-block; padding:2px 7px; border-radius:8px; font-size:10px; font-weight:600; letter-spacing:.04em; }
.earn-when-upcoming { background:#1e3a8a; color:#dbeafe; }
.earn-when-past { background:#374151; color:#d1d5db; }
.earn-surprise-pos { color:#22c55e; font-weight:600; }
.earn-surprise-neg { color:#ef4444; font-weight:600; }
.earn-empty { padding:32px; text-align:center; color:#9ca3af; }

/* === Swing screener layout (left filter panel) === */
.swing-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .swing-layout { grid-template-columns: 1fr; } }
.swing-results { min-width: 0; }
.swing-results .card { min-width: 0; }
.swing-filters { padding: 14px 14px 10px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; font-size: 13px; }
.swing-filters-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.swing-filters-header h3 { margin: 0; font-size: 15px; }
.swing-filters details { border-top: 1px solid #eef0f3; padding: 8px 0 6px; }
.swing-filters details:first-of-type { border-top: none; }
.swing-filters summary { cursor: pointer; font-weight: 600; padding: 4px 0; user-select: none; color: #1f2937; }
.swing-filters summary:hover { color: #4338ca; }
.swing-filters label { display: block; padding: 3px 0 3px 4px; cursor: pointer; color: #374151; }
.swing-filters label:hover { color: #111827; }
.swing-filters input[type=checkbox], .swing-filters input[type=radio] { margin-right: 6px; vertical-align: middle; }
.swing-filters .xs { font-size: 11px; margin: 4px 0 2px; color: #9ca3af; }
.btn-link { background: none; border: none; color: #4338ca; cursor: pointer; padding: 0; font-size: 12px; }
.btn-link:hover { text-decoration: underline; }

/* === Layout polish: contain wide tables, even margins === */
.card { max-width: 100%; }
.table-wrap { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
/* Always reserve a visible horizontal scrollbar for wide data tables. */
.table-wrap::-webkit-scrollbar { height: 12px; width: 12px; }
.table-wrap::-webkit-scrollbar-track { background: #f3f4f6; }
.table-wrap::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 6px; border: 2px solid #f3f4f6; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #6b7280; }
.table-wrap { scrollbar-color: #9ca3af #f3f4f6; scrollbar-width: thin; }
/* Ensure dashboards / grids never overflow viewport */
.dashboard-grid, .swing-layout, .mod-shell { max-width: 100%; }

/* === Highlight golden/death cross screen cards === */
.screen-card-golden-cross { border: 2px solid #16a34a !important; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important; }
.screen-card-golden-cross .screen-card-name { color: #14532d; font-weight: 800; font-size: 16px; letter-spacing: .02em; }
.screen-card-golden-cross:hover { box-shadow: 0 4px 14px rgba(22,163,74,.25) !important; }
.screen-card-death-cross { border: 2px solid #dc2626 !important; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; }
.screen-card-death-cross .screen-card-name { color: #7f1d1d; font-weight: 800; font-size: 16px; letter-spacing: .02em; }
.screen-card-death-cross:hover { box-shadow: 0 4px 14px rgba(220,38,38,.25) !important; }