/* ============================================================
   style.css — Nexus Terminal
   Dark terminal aesthetic · IDX Fundamental Analysis
   Mobile-first, responsive
   ============================================================ */

/* ─── CSS CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:      #02060c;
  --bg2:     #060d18;
  --bg3:     #0a1420;
  --bg4:     #0e1b2a;
  --border:  #152030;
  --border2: #1e2f45;

  /* Accent colors */
  --amber:   #f0b429;
  --blue:    #3b9eff;
  --green:   #00d68f;
  --red:     #ff4757;
  --purple:  #a78bfa;
  --cyan:    #22d3ee;

  /* Text */
  --text:    #dde8f5;
  --text2:   #7a95b5;
  --text3:   #3a5270;

  /* Typography */
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'Inter', 'Segoe UI', sans-serif;

  /* Font sizes (mobile-first) */
  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-base: 12px;
  --fs-md:   13px;
  --fs-lg:   16px;
}

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

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* ─── BODY ───────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-base);
  line-height: 1.4;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Subtle CRT scanline */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.025) 2px, rgba(0,0,0,0.025) 3px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  gap: 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
  overflow: hidden;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-center {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
/* Fade edges on ticker */
.topbar-center::before,
.topbar-center::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  z-index: 2;
  pointer-events: none;
}
.topbar-center::before { left: 0;  background: linear-gradient(to right, var(--bg2), transparent); }
.topbar-center::after  { right: 0; background: linear-gradient(to left,  var(--bg2), transparent); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Logo */
.logo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--amber);
  letter-spacing: 3px;
  white-space: nowrap;
}
.logo-accent { color: var(--amber); opacity: 0.6; }

.logo-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text3);
  padding: 2px 6px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  white-space: nowrap;
}

/* Ticker tape */
#ticker {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
}
.ticker-track {
  display: inline-flex;
  gap: 20px;
  align-items: center;
  flex-shrink: 0;
  padding-right: 20px;
  animation: ticker-scroll 70s linear infinite;
}
/* Pause on hover for readability */
#ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.ti {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: var(--fs-xs);
}
.ti-sym { color: var(--amber); font-weight: 700; }
.ti-chg { font-size: 9px; }

/* Status dot + text */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .3s;
}
/* app.js sets .conn-dot class on #statusDot */
.conn-dot.live       { background: var(--green); box-shadow: 0 0 5px var(--green); animation: blink 2s infinite; }
.conn-dot.connecting { background: var(--amber); animation: blink .5s infinite; }
.conn-dot.dead       { background: var(--red); }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .2; }
}

.status-text {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
}

.clock {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ================================================================
   MAIN NAVIGATION
   ================================================================ */
.main-nav {
  display: flex;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  gap: 2px;
  flex-shrink: 0;
}

.nav-btn {
  padding: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text3);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--mono);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-btn .nav-icon { font-size: var(--fs-sm); }
.nav-btn:hover     { color: var(--text2); }
.nav-btn.active    { color: var(--amber); border-bottom-color: var(--amber); }

/* ================================================================
   VIEWS
   ================================================================ */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.view {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.view.active { display: flex; }
#view-overview { display: flex; } /* default active */

/* ================================================================
   OVERVIEW WORKSPACE  (3 columns on desktop)
   ================================================================ */
.workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--border); /* creates 1px gaps between panels */
  gap: 1px;
}

/* ================================================================
   PANEL LEFT: Stock List
   ================================================================ */
.panel-list {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  max-height: 38vh;
  overflow: hidden;
}

/* Search */
.search-box {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  gap: 6px;
  flex-shrink: 0;
}
.search-box input,
#searchInput {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  padding: 5px 8px;
  outline: none;
  border-radius: 3px;
  transition: border-color .15s;
}
.search-box input:focus,
#searchInput:focus { border-color: var(--amber); }
.search-box input::placeholder,
#searchInput::placeholder { color: var(--text3); }
.search-icon {
  color: var(--text3);
  font-size: var(--fs-md);
  flex-shrink: 0;
}

/* Sort controls */
.list-controls {
  display: flex;
  gap: 4px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sort-btn {
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text3);
  font-family: var(--mono);
  cursor: pointer;
  border-radius: 2px;
  transition: all .12s;
}
.sort-btn:hover  { color: var(--text2); border-color: var(--text3); }
.sort-btn.active { background: rgba(240,180,41,.12); border-color: var(--amber); color: var(--amber); }

/* Stock list */
#stockList,
.stock-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.stock-item {
  border-bottom: 1px solid rgba(21,32,48,.5);
}
.loading-text {
  padding: 20px;
  text-align: center;
  color: var(--text3);
  font-size: var(--fs-sm);
}

/* Stock row (rendered by app.js) */
.sl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(21,32,48,.5);
  transition: background .1s;
  position: relative;
}
.sl-row:hover   { background: var(--bg3); }
.sl-row.active  { background: var(--bg4); }
.sl-row.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--amber);
}
.sl-left  { flex: 1; min-width: 0; }
.sl-right { text-align: right; flex-shrink: 0; }
.sl-sym   { font-weight: 700; font-size: var(--fs-base); color: var(--amber); }
.sl-name  { font-size: 9px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-price { font-size: var(--fs-sm); font-weight: 600; }
.sl-chg   { font-size: 9px; }
.list-empty { padding: 20px; text-align: center; color: var(--text3); font-size: var(--fs-sm); }

/* F-Score badge */
.fscore-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 2px;
  flex-shrink: 0;
}
.fscore-badge.fscore-green { background: rgba(0,214,143,.15); color: var(--green); border: 1px solid rgba(0,214,143,.3); }
.fscore-badge.fscore-amber { background: rgba(240,180,41,.15); color: var(--amber); border: 1px solid rgba(240,180,41,.3); }
.fscore-badge.fscore-red   { background: rgba(255,71,87,.15);  color: var(--red);   border: 1px solid rgba(255,71,87,.3); }

/* Flash animations */
@keyframes flashGreen { from { background: rgba(0,214,143,.2); } to { background: transparent; } }
@keyframes flashRed   { from { background: rgba(255,71,87,.2);  } to { background: transparent; } }
.flash-up { animation: flashGreen .6s ease; }
.flash-dn { animation: flashRed .6s ease; }

/* ================================================================
   PANEL CENTER: Detail
   ================================================================ */
.panel-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-height: 0;
  overflow: hidden;
}

/* Price header */
.price-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
  min-height: 52px;
}
.ph-left  { flex: 1; min-width: 0; }
.ph-right { text-align: right; flex-shrink: 0; }

.ph-sym {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.ph-name {
  font-size: var(--fs-xs);
  color: var(--text2);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-price {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.ph-chg {
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: 3px;
}

/* Detail sub-tabs */
.detail-tabs {
  display: flex;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  gap: 2px;
  flex-shrink: 0;
}
.detail-tab {
  padding: 7px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text3);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--mono);
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.detail-tab:hover  { color: var(--text2); }
.detail-tab.active { color: var(--amber); border-bottom-color: var(--amber); }

/* Detail panels (HTML uses .detail-panel, toggled by app.js) */
.detail-panel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

/* Chart panel */
#panel-chart {
  overflow: hidden;
}
#chartContainer {
  height: 100%;
  min-height: 380px;
  position: relative;
}
.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-loading {
  text-align: center;
  color: var(--text3);
}
.chart-loading-icon {
  display: block;
  font-size: 32px;
  color: var(--amber);
  margin-bottom: 12px;
  opacity: 0.5;
}
.chart-loading p {
  font-size: var(--fs-sm);
  margin-bottom: 4px;
}
.chart-loading-sub {
  font-size: 9px;
  color: var(--text3);
}

/* OHLCV panel */
#panel-ohlcv { padding: 12px; }
.ohlcv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.ohlcv-cell {
  background: var(--bg3);
  padding: 8px 10px;
}
.ohlcv-label { font-size: 9px; color: var(--text3); letter-spacing: 1px; margin-bottom: 3px; }
.ohlcv-val   { font-size: var(--fs-sm); font-weight: 600; }
.ohlcv-empty { padding: 30px; text-align: center; color: var(--text3); }

/* ─── FUNDAMENTAL & VALUASI (rendered by app.js) ─────────────── */

.section-header {
  padding: 5px 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.fund-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.fund-cell {
  background: var(--bg);
  padding: 7px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: help;
  transition: background .1s;
}
.fund-cell:hover { background: var(--bg2); }
.fund-label  { font-size: var(--fs-xs); color: var(--text2); display: flex; align-items: center; gap: 4px; }
.fund-val    { font-size: var(--fs-sm); font-weight: 600; text-align: right; }
.info-icon   { font-size: 8px; color: var(--text3); border: 1px solid var(--text3); border-radius: 50%; padding: 0 2px; cursor: help; }

/* Health summary in Fundamental panel */
.health-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.health-left   { flex-shrink: 0; text-align: center; }
.health-mid    { flex: 1; }
.health-right  { flex-shrink: 0; text-align: center; min-width: 56px; }
.health-score-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.health-score-num span { font-size: var(--fs-md); color: var(--text3); }
.health-score-lbl { font-size: 9px; color: var(--text3); letter-spacing: 1px; margin-top: 3px; }
.health-bar-bg   { height: 5px; background: var(--bg3); border-radius: 3px; border: 1px solid var(--border2); margin-bottom: 6px; }
.health-bar-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.health-bar-fill.green { background: var(--green); }
.health-bar-fill.amber { background: var(--amber); }
.health-bar-fill.red   { background: var(--red); }
.health-rec     { font-size: var(--fs-xs); color: var(--text2); line-height: 1.5; }
.overall-num    { font-size: 22px; font-weight: 700; }
.overall-lbl    { font-size: var(--fs-xs); font-weight: 700; }
.overall-sub    { font-size: 8px; color: var(--text3); letter-spacing: 1px; margin-top: 2px; }

.stock-desc-box {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.stock-desc-label { font-size: 9px; color: var(--text3); letter-spacing: 2px; margin-bottom: 6px; }
.stock-desc { font-size: var(--fs-sm); color: var(--text2); line-height: 1.6; font-family: var(--sans); }

.data-disclaimer {
  padding: 10px 14px;
  font-size: 9px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  line-height: 1.6;
}
.data-disclaimer strong { color: var(--amber); }

/* ─── Valuation cards ─────────────────────────────────────────── */
.iv-intro {
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  line-height: 1.6;
}
.iv-card {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.iv-card:hover { background: var(--bg2); }
.iv-card.iv-na { opacity: .6; }
.iv-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.iv-icon   { font-size: var(--fs-md); }
.iv-label  { font-size: var(--fs-sm); font-weight: 700; color: var(--text2); flex: 1; }
.iv-badge  { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 2px; letter-spacing: 1px; }
.iv-badge.green { background: rgba(0,214,143,.15); color: var(--green); }
.iv-badge.amber { background: rgba(240,180,41,.15); color: var(--amber); }
.iv-badge.red   { background: rgba(255,71,87,.15);  color: var(--red); }
.iv-badge.na    { background: var(--bg3);            color: var(--text3); }
.iv-body    { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.iv-price   { font-size: 18px; font-weight: 700; }
.iv-mos     { font-size: var(--fs-xs); font-weight: 600; }
.iv-current { font-size: var(--fs-xs); color: var(--text3); }
.iv-desc    { font-size: var(--fs-xs); color: var(--text3); line-height: 1.5; }
.iv-warn    { margin-top: 4px; font-size: var(--fs-xs); color: var(--amber); line-height: 1.5; }
.iv-note    { font-size: var(--fs-xs); color: var(--text3); line-height: 1.5; }

/* Relative valuation */
.rel-box { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rel-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 3px 0; color: var(--text2); }
.rel-conclusion { margin-top: 8px; font-size: var(--fs-sm); font-weight: 700; padding: 5px 0; }

/* F-Score detail panel */
.fscore-intro {
  padding: 10px 14px;
  font-size: var(--fs-xs);
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}
.fscore-total-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.fscore-total-num  { font-size: 32px; font-weight: 700; flex-shrink: 0; }
.fscore-max        { font-size: var(--fs-md); color: var(--text3); }
.fscore-total-lbl  { font-size: var(--fs-sm); font-weight: 700; }
.fscore-rec        { font-size: var(--fs-xs); color: var(--text2); margin-top: 3px; }
.fscore-dim        { border-bottom: 1px solid var(--border); }
.fscore-dim-title  { padding: 5px 14px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--text3); background: var(--bg2); }
.fscore-row        { display: flex; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--border); transition: background .1s; }
.fscore-row:hover  { background: var(--bg3); }
.fscore-row.pass .fscore-check { color: var(--green); }
.fscore-row.fail .fscore-check { color: var(--red); }
.fscore-check      { font-size: var(--fs-md); flex-shrink: 0; }
.fscore-criterion  { font-size: var(--fs-sm); font-weight: 600; }
.fscore-detail     { font-size: var(--fs-xs); color: var(--text2); margin-top: 2px; }
.fscore-explain    { font-size: 9px; color: var(--text3); margin-top: 2px; line-height: 1.5; }

/* DCF calculator */
.dcf-calc    { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dcf-inputs  { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.dcf-row     { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.dcf-row label { font-size: var(--fs-xs); color: var(--text2); }
.dcf-row input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  padding: 5px 8px;
  border-radius: 3px;
  width: 110px;
  outline: none;
}
.dcf-row input:focus { border-color: var(--amber); }
.dcf-btn {
  padding: 5px 14px;
  background: rgba(240,180,41,.12);
  border: 1px solid rgba(240,180,41,.3);
  color: var(--amber);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 3px;
  transition: background .15s;
  align-self: flex-end;
  white-space: nowrap;
}
.dcf-btn:hover { background: rgba(240,180,41,.22); }
.dcf-result { font-size: var(--fs-sm); color: var(--text2); line-height: 1.6; margin-top: 8px; }

/* ================================================================
   PANEL RIGHT: Market Overview
   ================================================================ */
.panel-right {
  display: none; /* hidden on mobile, shown on desktop */
  flex-direction: column;
  background: var(--bg);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

/* Widget card */
.widget-box {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.widget-title {
  padding: 6px 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

/* Indices */
.indices-list, .indices-loading {
  padding: 0;
}
.indices-loading, .movers-loading {
  padding: 14px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text3);
}
.index-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.index-row:last-child { border-bottom: none; }
.index-row:hover { background: var(--bg3); }
.idx-sym   { font-size: var(--fs-sm); font-weight: 700; color: var(--amber); }
.idx-name  { font-size: 9px; color: var(--text3); margin-top: 1px; }
.idx-price { font-size: var(--fs-sm); font-weight: 600; }
.idx-chg   { font-size: 9px; }

/* Health summary in right panel (rendered by app.js renderHealthSummary) */
#healthSummary {
  padding: 10px 12px;
}
#healthSummary .health-summary {
  padding: 0;
  border-bottom: none;
}

/* Top movers */
.top-movers { padding: 0; }
.mover-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.mover-row:last-child { border-bottom: none; }
.mover-row:hover { background: var(--bg3); }
.mover-sym { font-size: var(--fs-sm); font-weight: 700; color: var(--amber); }
.mover-chg { font-size: var(--fs-xs); font-weight: 600; }

/* ================================================================
   SCREENER VIEW
   ================================================================ */
#view-screener {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.screener-header {
  padding: 14px 16px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.screener-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.screener-desc {
  font-size: var(--fs-xs);
  color: var(--text3);
  line-height: 1.6;
}

/* Preset buttons row */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}
.preset-btn {
  padding: 6px 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  cursor: pointer;
  border-radius: 3px;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 120px;
}
.preset-btn:hover  { border-color: var(--amber); color: var(--amber); }
.preset-btn.active { background: rgba(240,180,41,.1); border-color: var(--amber); color: var(--amber); }
.preset-icon { font-size: var(--fs-sm); }
.preset-name { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; }
.preset-desc { font-size: 9px; color: var(--text3); }
.preset-btn.active .preset-desc { color: rgba(240,180,41,.7); }

/* Filter panel */
.filter-panel {
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.filter-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 16px;
  align-items: start;
}
.filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-group-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text3);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.filter-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.filter-label {
  font-size: var(--fs-xs);
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  font-size: 8px;
  color: var(--text3);
  border: 1px solid var(--text3);
  border-radius: 50%;
  cursor: help;
  flex-shrink: 0;
}
.tooltip-trigger:hover { color: var(--amber); border-color: var(--amber); }
.filter-input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  padding: 5px 8px;
  border-radius: 3px;
  outline: none;
  width: 100%;
  transition: border-color .15s;
}
.filter-input:focus { border-color: var(--amber); }
.filter-input::placeholder { color: var(--text3); }

/* Filter actions (spans full width in the grid) */
.filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.btn-apply {
  padding: 6px 16px;
  background: rgba(240,180,41,.15);
  border: 1px solid rgba(240,180,41,.4);
  color: var(--amber);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 3px;
  transition: background .15s;
}
.btn-apply:hover { background: rgba(240,180,41,.25); }
.btn-reset {
  padding: 6px 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  cursor: pointer;
  border-radius: 3px;
  transition: all .15s;
}
.btn-reset:hover { color: var(--text2); border-color: var(--text2); }

/* Screener results */
.screener-results {
  flex: 1;
  padding: 12px 16px;
  overflow-x: hidden;
}
.results-header {
  font-size: var(--fs-xs);
  color: var(--text3);
  letter-spacing: 1px;
  margin-bottom: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.table-wrapper { overflow-x: auto; }
.screener-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.screener-table th {
  padding: 6px 8px;
  text-align: left;
  background: var(--bg2);
  border-bottom: 2px solid var(--border2);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}
.screener-table th.num { text-align: right; }
.screener-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.screener-table td:not(:first-child):not(:nth-child(2)) { text-align: right; }
.screener-row { cursor: pointer; transition: background .1s; }
.screener-row:hover { background: var(--bg3); }
.sym-cell   { color: var(--amber); font-weight: 700; }
.name-cell  { color: var(--text2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; text-align: left !important; }
.table-empty { padding: 30px; text-align: center; color: var(--text3); }

/* ================================================================
   LEARNING CENTER VIEW
   ================================================================ */
#view-learn {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.learn-header {
  padding: 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.learn-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  font-family: var(--sans);
}
.learn-desc {
  font-size: var(--fs-xs);
  color: var(--text3);
  line-height: 1.6;
  font-family: var(--sans);
}

/* Progress bar */
.learn-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.progress-track {
  flex: 1;
  height: 4px;
  background: var(--bg3);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border2);
}
.progress-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 4px;
  transition: width .5s ease;
}
.progress-label {
  font-size: 9px;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Module accordion */
.learn-module {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.module-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg2);
  border: none;
  color: var(--text);
  font-family: var(--mono);
  text-align: left;
  transition: background .12s;
}
.module-header:hover { background: var(--bg3); }
.module-header[aria-expanded="true"] { background: var(--bg3); }

.module-num {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--amber);
  opacity: .8;
  flex-shrink: 0;
  width: 24px;
}
.module-title {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}
.module-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 2px;
  flex-shrink: 0;
}
.module-tag.beginner     { background: rgba(0,214,143,.12); color: var(--green); border: 1px solid rgba(0,214,143,.25); }
.module-tag.intermediate { background: rgba(240,180,41,.12); color: var(--amber); border: 1px solid rgba(240,180,41,.25); }
.module-tag.advanced     { background: rgba(255,71,87,.12);  color: var(--red);   border: 1px solid rgba(255,71,87,.25); }
.module-chevron {
  color: var(--text3);
  font-size: var(--fs-xs);
  flex-shrink: 0;
  transition: transform .2s;
}
.module-header[aria-expanded="true"] .module-chevron { transform: rotate(180deg); }

/* Module body */
.module-body { }
.module-content {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--text2);
  line-height: 1.7;
}
.module-content h3 {
  font-size: var(--fs-md);
  color: var(--text);
  margin-bottom: 8px;
  margin-top: 18px;
  font-weight: 700;
  font-family: var(--sans);
}
.module-content h3:first-child { margin-top: 0; }
.module-content p  { margin-bottom: 10px; }
.module-content ul { margin-left: 18px; margin-bottom: 10px; }
.module-content li { margin-bottom: 4px; }
.module-content strong { color: var(--text); }
.module-content em    { color: var(--amber); font-style: italic; }

/* Insight box */
.insight-box {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(59,158,255,.06);
  border: 1px solid rgba(59,158,255,.2);
  border-radius: 4px;
  margin: 12px 0;
  font-size: var(--fs-sm);
}
.insight-box.warning {
  background: rgba(240,180,41,.06);
  border-color: rgba(240,180,41,.25);
}
.insight-icon { font-size: 16px; flex-shrink: 0; }

/* Financial statements grid */
.fin-statements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.fin-stmt {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 10px 12px;
}
.fin-stmt-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 6px;
  font-family: var(--mono);
}

/* Cycle table */
.cycle-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0;
}
.cycle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg3);
  font-size: var(--fs-xs);
}
.cycle-period   { color: var(--text2); }
.cycle-deadline { color: var(--amber); font-weight: 600; }

/* Formula box */
.formula-box {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--amber);
  border-radius: 0 4px 4px 0;
  padding: 12px 16px;
  margin: 12px 0;
}
.formula-title { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--text3); margin-bottom: 8px; text-transform: uppercase; font-family: var(--mono); }
.formula-main  { font-size: var(--fs-md); font-weight: 700; color: var(--amber); font-family: var(--mono); margin-bottom: 8px; }
.formula-note  { font-size: var(--fs-xs); color: var(--text3); line-height: 1.5; }
.formula-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.formula-legend span { font-size: var(--fs-xs); color: var(--text3); }

/* Interpret list */
.interpret-list { list-style: none; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.interpret-list li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.badge.green  { background: rgba(0,214,143,.15); color: var(--green); border: 1px solid rgba(0,214,143,.3); }
.badge.yellow { background: rgba(240,180,41,.15); color: var(--amber); border: 1px solid rgba(240,180,41,.3); }
.badge.red    { background: rgba(255,71,87,.15);  color: var(--red);   border: 1px solid rgba(255,71,87,.3); }

/* Calculator box */
.calc-box {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 14px;
  margin: 12px 0;
}
.calc-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}
.calc-field label {
  font-size: var(--fs-xs);
  color: var(--text2);
  font-family: var(--mono);
}
.calc-field input {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  padding: 6px 8px;
  border-radius: 3px;
  outline: none;
  width: 140px;
  transition: border-color .15s;
}
.calc-field input:focus { border-color: var(--amber); }
.calc-field input::placeholder { color: var(--text3); }
.btn-calc {
  padding: 7px 16px;
  background: rgba(240,180,41,.15);
  border: 1px solid rgba(240,180,41,.4);
  color: var(--amber);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 3px;
  transition: background .15s;
}
.btn-calc:hover { background: rgba(240,180,41,.25); }
.calc-result {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 3px;
  font-size: var(--fs-sm);
  font-family: var(--mono);
  border: 1px solid var(--border2);
}

/* Module CTA */
.module-cta { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.btn-try-terminal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(240,180,41,.1);
  border: 1px solid rgba(240,180,41,.3);
  color: var(--amber);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s;
}
.btn-try-terminal:hover { background: rgba(240,180,41,.2); }

/* F-Score education */
.fscore-education { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.fscore-group { background: var(--bg3); border: 1px solid var(--border2); border-radius: 4px; overflow: hidden; }
.fscore-group-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  background: var(--bg4);
  border-bottom: 1px solid var(--border2);
  text-transform: uppercase;
  font-family: var(--mono);
}
.fscore-group-title.green { color: var(--green); border-left: 3px solid var(--green); }
.fscore-group-title.amber { color: var(--amber); border-left: 3px solid var(--amber); }
.fscore-group-title.blue  { color: var(--blue);  border-left: 3px solid var(--blue); }
.fscore-item-edu {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.fscore-item-edu:last-child { border-bottom: none; }
.fscore-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(240,180,41,.12);
  border: 1px solid rgba(240,180,41,.25);
  color: var(--amber);
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  flex-shrink: 0;
  font-family: var(--mono);
}
.fscore-why { display: block; font-size: var(--fs-xs); color: var(--text3); margin-top: 2px; font-family: var(--mono); }

/* F-Score scale */
.fscore-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.scale-item {
  text-align: center;
  padding: 10px 8px;
  border-radius: 4px;
  border: 1px solid var(--border2);
}
.scale-item.strong   { background: rgba(0,214,143,.08); border-color: rgba(0,214,143,.25); }
.scale-item.moderate { background: rgba(240,180,41,.08); border-color: rgba(240,180,41,.25); }
.scale-item.weak     { background: rgba(255,71,87,.08);  border-color: rgba(255,71,87,.25); }
.scale-range { display: block; font-size: 20px; font-weight: 700; font-family: var(--mono); margin-bottom: 4px; }
.scale-item.strong   .scale-range { color: var(--green); }
.scale-item.moderate .scale-range { color: var(--amber); }
.scale-item.weak     .scale-range { color: var(--red); }
.scale-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; font-family: var(--mono); }
.scale-item.strong   .scale-label { color: var(--green); }
.scale-item.moderate .scale-label { color: var(--amber); }
.scale-item.weak     .scale-label { color: var(--red); }
.scale-desc  { display: block; font-size: var(--fs-xs); color: var(--text3); line-height: 1.4; }

/* Framework steps */
.framework-steps { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.framework-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 4px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(240,180,41,.15);
  border: 1px solid rgba(240,180,41,.3);
  color: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--mono);
}
.step-content { font-size: var(--fs-sm); color: var(--text2); }
.step-content strong { color: var(--text); display: block; margin-bottom: 4px; }
.step-content p { margin: 0; }

/* Comparison table */
.comparison-table {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.comp-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.comp-row:last-child { border-bottom: none; }
.comp-row.header { background: var(--bg2); }
.comp-row > span {
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--text2);
  border-right: 1px solid var(--border);
}
.comp-row > span:last-child { border-right: none; }
.comp-row.header > span { font-weight: 700; color: var(--text3); letter-spacing: 1px; font-family: var(--mono); }
.comp-method { color: var(--amber) !important; font-weight: 700 !important; }

/* ================================================================
   BOTTOM NAV (Mobile only)
   ================================================================ */
.bottom-nav {
  display: flex;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.bnav-btn {
  flex: 1;
  padding: 10px 5px 8px;
  border: none;
  background: none;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: color .15s;
}
.bnav-icon { font-size: 16px; }
.bnav-label { font-size: 8px; }
.bnav-btn:hover,
.bnav-btn.active { color: var(--amber); }

/* ================================================================
   TOOLTIP POPUP
   ================================================================ */
.tooltip-popup {
  display: none;
  position: fixed;
  z-index: 10000;
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: var(--fs-xs);
  font-family: var(--sans);
  padding: 10px 14px;
  border-radius: 4px;
  max-width: 260px;
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  border-left: 3px solid var(--amber);
}
.tooltip-close {
  position: absolute;
  top: 6px; right: 8px;
  font-size: var(--fs-xs);
  color: var(--text3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.tooltip-close:hover { color: var(--text); }
.tooltip-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 5px;
  font-family: var(--mono);
  padding-right: 16px;
}
.tooltip-body { font-size: var(--fs-xs); color: var(--text2); line-height: 1.6; }

/* ================================================================
   COLOR UTILITIES
   ================================================================ */
.up    { color: var(--green); }
.dn    { color: var(--red); }
.nu    { color: var(--text2); }
.green { color: var(--green); }
.amber { color: var(--amber); }
.red   { color: var(--red); }
.hl    { color: var(--amber); }

/* ================================================================
   RESPONSIVE: TABLET (768px+)
   ================================================================ */
@media (min-width: 768px) {
  :root {
    --fs-xs:   10px;
    --fs-sm:   11px;
    --fs-base: 12px;
  }

  /* Hide mobile bottom nav */
  .bottom-nav { display: none; }

  /* 3-column layout */
  .workspace {
    flex-direction: row;
    flex: 1;
    min-height: 0;
    height: 0;
  }

  .panel-list {
    flex: 0 0 240px;
    max-height: none;
    height: auto;
  }

  .panel-right {
    display: flex;
    flex: 0 0 260px;
    flex-direction: column;
  }

  .panel-detail {
    flex: 1;
  }

  /* Ticker always visible */
  .topbar-center { display: block; }
}

/* ================================================================
   RESPONSIVE: DESKTOP (1024px+)
   ================================================================ */
@media (min-width: 1024px) {
  .panel-list  { flex: 0 0 260px; }
  .panel-right { flex: 0 0 280px; }
}

@media (min-width: 1280px) {
  :root { --fs-base: 12px; }
  .panel-list  { flex: 0 0 280px; }
  .panel-right { flex: 0 0 300px; }
}

/* ================================================================
   HIDE TICKER ON VERY SMALL SCREENS
   ================================================================ */
@media (max-width: 480px) {
  .topbar-center { display: none; }
  .logo-tag      { display: none; }
}