/* ============================================================
   STOCK SCREENER — Clean White Theme
   Fonts: DM Mono (data) + DM Sans (UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --surface2:  #f9fafb;
  --border:    #e5e7eb;
  --border2:   #d1d5db;

  --text:      #111827;
  --text-2:    #4b5563;
  --text-3:    #9ca3af;

  --green:     #059669;
  --green-bg:  #ecfdf5;
  --green-bdr: #a7f3d0;
  --red:       #dc2626;
  --red-bg:    #fef2f2;
  --red-bdr:   #fca5a5;
  --blue:      #2563eb;
  --blue-bg:   #eff6ff;
  --blue-bdr:  #bfdbfe;
  --amber:     #d97706;
  --amber-bg:  #fffbeb;
  --amber-bdr: #fde68a;

  --accent:    #2563eb;
  --radius:    7px;
  --radius-lg: 10px;
  --nav-h:     52px;

  --font-data: 'DM Mono', monospace;
  --font-ui:   'DM Sans', sans-serif;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

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

/* ============================================================
   NAV BAR
   ============================================================ */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}

.nav-brand {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 4px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Text label inside nav buttons — hidden on small screens */
.nav-link-label { display: inline; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  height: 32px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  background: transparent;
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { color: var(--text); }
.btn:active { transform: scale(0.97); }

.btn-nav {
  color: var(--text-2);
  border-color: transparent;
  background: transparent;
  padding: 0 9px;
}
.btn-nav:hover  { background: var(--surface2); border-color: var(--border); color: var(--text); }
.btn-nav.active { background: var(--blue-bg); border-color: var(--blue-bdr); color: var(--accent); font-weight: 600; }

.btn-icon { width: 32px; height: 32px; padding: 0; flex-shrink: 0; }

.btn-ghost  { border-color: var(--border); color: var(--text-2); background: var(--surface); }
.btn-ghost:hover { border-color: var(--border2); color: var(--text); background: var(--surface2); }

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.btn-secondary:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); }

.btn-danger        { border-color: var(--red-bdr);   color: var(--red);   background: var(--red-bg); }
.btn-danger:hover  { background: #fee2e2; border-color: var(--red); color: var(--red); }

.btn-success       { border-color: var(--green-bdr); color: var(--green); background: var(--green-bg); }
.btn-success:hover { background: #d1fae5; border-color: var(--green); color: var(--green); }

.btn-warning       { border-color: var(--amber-bdr); color: var(--amber); background: var(--amber-bg); }
.btn-warning:hover { background: #fde68a55; border-color: var(--amber); color: var(--amber); }

.btn-outline-warning       { border-color: var(--amber-bdr); color: var(--amber); background: transparent; }
.btn-outline-warning:hover { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 12px 48px;
}

/* ============================================================
   EQUITY STRIP
   ============================================================ */
.equity-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  gap: 1px;
}

.equity-cell {
  background: var(--surface);
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.equity-label {
  font-size: 0.65rem;
  font-family: var(--font-data);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.equity-value {
  font-family: var(--font-data);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.equity-value.positive { color: var(--green); }
.equity-value.negative { color: var(--red); }

/* ============================================================
   DATA TABLE
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

table.dt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

table.dt-table thead th {
  background: var(--surface2);
  color: var(--text-3);
  font-family: var(--font-data);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.dt-table thead th:first-child { text-align: left; }

table.dt-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.08s;
}
table.dt-table tbody tr:last-child  { border-bottom: none; }
table.dt-table tbody tr:hover       { background: var(--surface2); }

table.dt-table tbody td {
  padding: 8px 11px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
table.dt-table tbody td:first-child {
  text-align: left;
  color: var(--text);
  font-weight: 600;
}

/* Sticky first column */
table.dt-table thead th:first-child,
table.dt-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  min-width: 80px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.dt-table thead th:first-child { z-index: 3; background: var(--surface2); }
table.dt-table tbody tr:hover td:first-child { background: var(--surface2); }

/* DataTables — hide controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { display: none !important; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.badge-buy        { background: var(--green-bg);  color: var(--green); border: 1px solid var(--green-bdr); }
.badge-sell       { background: var(--red-bg);    color: var(--red);   border: 1px solid var(--red-bdr); }
.badge-hold       { background: var(--blue-bg);   color: var(--blue);  border: 1px solid var(--blue-bdr); }
.badge-akumulasi  { background: var(--green-bg);  color: var(--green); border: 1px solid var(--green-bdr); }
.badge-distribusi { background: var(--red-bg);    color: var(--red);   border: 1px solid var(--red-bdr); }

/* ============================================================
   INFO BAR + ALERTS
   ============================================================ */
.info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.info-bar .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.alert-danger {
  display: none;
  padding: 9px 13px;
  background: var(--red-bg);
  border: 1px solid var(--red-bdr);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 0.8rem;
  margin-bottom: 12px;
}

#error-message  { font-size: 0.78rem; color: var(--text-2); margin-bottom: 10px; }
#progress-message {
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--text-2);
  padding: 7px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0 10px;
  height: 32px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  transition: border-color 0.12s, box-shadow 0.12s;
  width: 100%;
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.form-control::placeholder { color: var(--text-3); }

.form-label {
  display: block;
  font-size: 0.72rem;
  font-family: var(--font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
.form-group { margin-bottom: 12px; }
.form-group label { display: block; margin-bottom: 4px; font-size: 0.75rem; color: var(--text-3); }
.item-input-group { display: flex; gap: 6px; margin-bottom: 6px; }

/* ============================================================
   CHART CONTAINERS
   ============================================================ */
#container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  height: 420px;
}

#container2, #container3 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  min-height: 60px;
  overflow: hidden;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--text);
}
.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.modal-header .close { color: var(--text-3); background: none; border: none; font-size: 1.1rem; cursor: pointer; opacity: 1; padding: 0; line-height: 1; }
.modal-header .close:hover { color: var(--text); }
.modal-body { padding: 14px 16px; }
.modal-footer { border-top: 1px solid var(--border); padding: 11px 16px; display: flex; justify-content: flex-end; gap: 7px; }
.modal-backdrop.show { opacity: 0.4; }

/* ============================================================
   TRADING TABLE CELLS
   ============================================================ */
.trading-table td { vertical-align: middle; }

.mult-cell { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.mult-value { font-family: var(--font-data); font-size: 0.85rem; font-weight: 500; color: var(--text); }
.spd-value  { font-family: var(--font-data); font-size: 0.68rem; color: var(--text-3); }
.spd-value.up { color: var(--green); }
.spd-value.dn { color: var(--red); }

.ask-cell  { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.35; }
.ask-price { font-size: 0.68rem; color: var(--text-3); font-family: var(--font-data); }
.ask-vol   { font-family: var(--font-data); font-size: 0.85rem; font-weight: 500; color: var(--text); }

.delta-up      { color: var(--red);    font-family: var(--font-data); font-size: 0.75rem; font-weight: 500; }
.delta-down    { color: var(--green);  font-family: var(--font-data); font-size: 0.75rem; font-weight: 500; }
.delta-neutral { color: var(--text-3); font-family: var(--font-data); font-size: 0.75rem; }

.price-shift { font-size: 0.68rem; font-family: var(--font-data); padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.price-shift.up { background: var(--green-bg); color: var(--green); }
.price-shift.dn { background: var(--red-bg);   color: var(--red); }

/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.text-green  { color: var(--green) !important; }
.text-red    { color: var(--red)   !important; }
.text-blue   { color: var(--blue)  !important; }
.text-muted  { color: var(--text-3) !important; }
.text-mono   { font-family: var(--font-data) !important; }
.no-wrap     { white-space: nowrap; }
.increase    { color: var(--green); }
.decrease    { color: var(--red); }

/* ============================================================
   HIGHCHARTS OVERRIDES — White Theme
   ============================================================ */
.highcharts-background      { fill: #ffffff !important; }
.highcharts-plot-background { fill: #ffffff !important; }
.highcharts-grid-line       { stroke: #f0f0f0 !important; }
.highcharts-axis-line       { stroke: var(--border2) !important; }
.highcharts-tick            { stroke: var(--border2) !important; }
.highcharts-axis-labels text { fill: var(--text-3) !important; font-family: var(--font-data) !important; font-size: 10px !important; }
.highcharts-title           { fill: var(--text)   !important; font-family: var(--font-ui) !important; }
.highcharts-subtitle        { fill: var(--text-2) !important; font-family: var(--font-data) !important; }
.highcharts-legend-item text { fill: var(--text-2) !important; font-family: var(--font-ui) !important; font-size: 11px !important; }
.highcharts-tooltip-box     { fill: #fff !important; stroke: var(--border2) !important; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1)); }
.highcharts-tooltip text    { fill: var(--text) !important; font-family: var(--font-data) !important; }

/* ============================================================
   BOOTSTRAP / COMPAT OVERRIDES
   ============================================================ */
.container  { max-width: 100%; }
.d-flex     { display: flex; }
.align-items-center   { align-items: center; }
.justify-content-between { justify-content: space-between; }
.table-responsive     { overflow-x: auto; }
.gap-2  { gap: 8px; }
.mt-3   { margin-top: 14px !important; }
.mb-2   { margin-bottom: 8px !important; }
.ml-2   { margin-left: 6px !important; }
.mr-1   { margin-right: 4px !important; }

.stats-container { margin: 16px 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* Progress bar */
#progress-bar       { width: 100%; background: var(--border); height: 4px; border-radius: 99px; margin-bottom: 8px; overflow: hidden; }
#progress-bar-inner { height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transition: width 0.3s; }

/* ============================================================
   RESPONSIVE — MOBILE  ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
  /* Nav */
  .nav-brand      { display: none; }
  .nav-bar        { padding: 0 8px; gap: 4px; height: 48px; --nav-h: 48px; }
  .nav-links      { gap: 1px; }
  .nav-actions    { gap: 3px; }

  /* Icon-only nav links */
  .nav-link-label { display: none; }
  .btn-nav        { padding: 0 8px; height: 34px; }

  /* Larger touch targets */
  .btn       { min-height: 34px; }
  .btn-icon  { width: 34px; height: 34px; }

  /* Page padding */
  .page { padding: 10px 8px 32px; }

  /* Equity: 2-column grid */
  .equity-strip { grid-template-columns: repeat(2, 1fr); }
  .equity-cell  { padding: 9px 10px; }
  .equity-value { font-size: 0.82rem; }
  .equity-label { font-size: 0.6rem; }

  /* Table cells */
  table.dt-table thead th,
  table.dt-table tbody td { padding: 7px 8px; font-size: 0.73rem; }

  /* Year buttons */
  .year-btn { padding: 0 7px; font-size: 0.68rem; height: 26px; }

  /* Fundachart stock input */
  #stockName { width: 80px !important; font-size: 0.78rem !important; }

  /* Chart */
  #container { min-height: 40px; }

  /* Modal */
  .modal-dialog   { margin: 8px; max-width: calc(100vw - 16px); }
  .modal-content  { border-radius: var(--radius); }

  /* Badges */
  .badge { font-size: 0.62rem; padding: 1px 5px; }

  /* Trading cells tighter */
  .mult-value, .ask-vol { font-size: 0.75rem; }
  .spd-value, .ask-price { font-size: 0.62rem; }

  /* Form control */
  .form-control { height: 38px; font-size: 0.85rem; }
}

/* ============================================================
   RESPONSIVE — TABLET  641px – 1024px
   ============================================================ */
@media (min-width: 641px) and (max-width: 1024px) {
  .nav-brand { display: none; }

  /* Equity: 3-column grid */
  .equity-strip { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
   BACKTEST PAGE
   ============================================================ */
.bt-header {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:12px; margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.bt-header h1 { font-size:1rem; font-weight:600; color:var(--text); font-family:var(--font-ui); }
.bt-header .sub { font-family:var(--font-data); font-size:.68rem; color:var(--text-3); letter-spacing:.07em; text-transform:uppercase; }
.bt-tag { display:inline-block; padding:2px 8px; border-radius:4px; font-family:var(--font-data); font-size:.65rem; font-weight:500; background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-bdr); }

.stat-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); min-width:0; }
.stat-cell { background:var(--surface); padding:12px 14px; }
.stat-label { font-family:var(--font-data); font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px; }
.stat-val { font-family:var(--font-data); font-size:1.05rem; font-weight:500; color:var(--text); white-space:nowrap; }
.stat-val.green{color:var(--green);} .stat-val.red{color:var(--red);} .stat-val.amber{color:var(--amber);} .stat-val.blue{color:var(--blue);}
.stat-sub { font-family:var(--font-data); font-size:.6rem; color:var(--text-3); margin-top:2px; }

.bt-page { padding:16px 20px 40px; display:flex; flex-direction:column; gap:14px; box-sizing:border-box; width:100%; overflow-x:hidden; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0; }
.grid2 > *, .grid3 > * { min-width:0; overflow:hidden; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

.bt-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); min-width:0; overflow:hidden; }
.bt-card-title { font-family:var(--font-data); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px; }

.bt-data-table { width:100%; border-collapse:collapse; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bt-data-table th {
  font-family:var(--font-data); font-size:.6rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); padding:6px 10px; border-bottom:1px solid var(--border); text-align:right; font-weight:500;
}
.bt-data-table th:first-child { text-align:left; }
.bt-data-table td {
  font-family:var(--font-data); font-size:.75rem; padding:7px 10px;
  border-bottom:1px solid var(--border); text-align:right; color:var(--text-2);
}
.bt-data-table td:first-child { text-align:left; color:var(--text); font-weight:500; }
.bt-data-table tr:last-child td { border-bottom:none; }
.bt-data-table tr:hover td { background:var(--surface2); }
.bt-data-table tr.avg-row td { color:var(--text); font-weight:500; background:var(--surface2); }
.pos{color:var(--green)!important;} .neg{color:var(--red)!important;}

/* Hide everything script.js injects — we build our own table */
#annual-comparison-container,
#weighted-avg-summary { display:none!important; }

.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.bar-label{font-family:var(--font-data);font-size:.7rem;color:var(--text-2);width:68px;text-align:right;flex-shrink:0;}
.bar-track{flex:1;height:17px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;overflow:hidden;}
.bar-fill{height:100%;border-radius:3px;transition:width .6s ease;opacity:.85;}
.bar-count{font-family:var(--font-data);font-size:.65rem;color:var(--text-3);width:34px;text-align:right;flex-shrink:0;}

.stock-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);}
.stock-row:last-child{border-bottom:none;}
.stock-sym{font-family:var(--font-data);font-size:.78rem;font-weight:500;color:var(--text);width:48px;flex-shrink:0;}
.stock-bar-track{flex:1;height:7px;background:var(--surface2);border:1px solid var(--border);border-radius:99px;overflow:hidden;}
.stock-bar-fill{height:100%;border-radius:99px;background:var(--green);opacity:.8;}
.stock-avg{font-family:var(--font-data);font-size:.72rem;color:var(--green);width:64px;text-align:right;flex-shrink:0;}
.stock-n{font-family:var(--font-data);font-size:.62rem;color:var(--text-3);width:42px;text-align:right;flex-shrink:0;}

.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
.donut-num{font-family:var(--font-data);font-size:1.9rem;font-weight:500;color:var(--text);}
.donut-sub{font-family:var(--font-data);font-size:.62rem;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;}
.legend-row{display:flex;gap:14px;margin-top:4px;flex-wrap:wrap;justify-content:center;}
.legend-item{display:flex;align-items:center;gap:5px;font-family:var(--font-data);font-size:.68rem;color:var(--text-2);}
.legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

.callout{text-align:center;padding:16px 0;}
.callout-val{font-family:var(--font-data);font-size:2.2rem;font-weight:500;}
.callout-label{font-family:var(--font-data);font-size:.62rem;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;margin-top:4px;}
.callout-sub{font-family:var(--font-data);font-size:.68rem;color:var(--text-3);margin-top:8px;line-height:1.5;}

.chart-box{position:relative;width:100%;}

.section-divider{display:flex;align-items:center;gap:10px;margin:4px 0 2px;}
.section-divider span{font-family:var(--font-data);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;}
.section-divider::after{content:'';flex:1;height:1px;background:var(--border);}

#table-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm);}
#table-container .table-wrap{margin-bottom:0;}

#akum-summary { border-radius:var(--radius-lg); }

/* ── Corr Emiten Selector ── */
.corr-emiten-bar {
  display: none; flex-direction: column; gap: 7px; margin-bottom: 12px;
  padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.corr-emiten-bar.visible { display: flex; }
.corr-emiten-top { display:flex; align-items:center; gap:8px; }
.corr-emiten-label { font-family:var(--font-data); font-size:.62rem; color:var(--text-3); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.corr-emiten-count { font-family:var(--font-data); font-size:.6rem; color:var(--text-3); white-space:nowrap; }
.corr-emiten-search {
  flex:1; min-width:0; font-family:var(--font-data); font-size:.68rem; padding:2px 7px;
  background:var(--surface); border:1px solid var(--border); border-radius:4px;
  color:var(--text); outline:none;
}
.corr-emiten-search::placeholder { color:var(--text-3); }
.corr-emiten-chips {
  display:flex; flex-wrap:nowrap; gap:5px; overflow-x:auto; padding-bottom:2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.corr-emiten-chips::-webkit-scrollbar { height:3px; }
.corr-emiten-chips::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }
.emiten-chip {
  padding: 2px 9px; border-radius: 4px; font-family: var(--font-data); font-size: .68rem;
  font-weight: 500; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: background .15s, color .15s;
  white-space: nowrap; flex-shrink: 0;
}
.emiten-chip:hover { background: var(--surface2); }
.emiten-chip.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.emiten-chip.hidden { display: none; }

#corr-tbody tr { cursor: pointer; }
#corr-tbody tr:hover td { background: var(--surface2) !important; }
#corr-tbody tr.corr-row-selected td { background: rgba(59,130,246,.1) !important; }
#corr-tbody tr.corr-row-added td { background: rgba(52,211,153,.07) !important; }
#corr-tbody tr.corr-row-added.corr-row-selected td { background: rgba(52,211,153,.15) !important; }
#corr-table th:first-child, #corr-table td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
  white-space: nowrap;
}
#corr-table th:first-child { z-index: 3; }
#corr-tbody tr:hover td:first-child { background: var(--surface2) !important; }
#corr-tbody tr.corr-row-selected td:first-child { background: rgba(59,130,246,.1) !important; }
#corr-tbody tr.corr-row-added td:first-child { background: rgba(52,211,153,.07) !important; }
#corr-tbody tr.corr-row-added.corr-row-selected td:first-child { background: rgba(52,211,153,.15) !important; }

/* ── Chart Modal ── */
#corrChartModal {
  display: none; position: fixed; inset: 0; z-index: 1060;
  background: rgba(0,0,0,.65); align-items: center; justify-content: center;
}
#corrChartModal.open { display: flex; }
.corr-chart-dialog {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.5); width: min(94vw, 960px);
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
.corr-chart-header {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.corr-chart-header-left { flex: 1; min-width: 0; }
.corr-chart-title { font-family: var(--font-data); font-size: .78rem; font-weight: 600; color: var(--text); }
.corr-chart-meta  { font-family: var(--font-data); font-size: .62rem; color: var(--text-3); margin-top: 2px; }
.corr-chart-close {
  background: none; border: none; cursor: pointer; color: var(--text-3);
  font-size: .88rem; padding: 2px 5px; line-height: 1; flex-shrink: 0;
}
.corr-chart-close:hover { color: var(--text); }
.corr-metric-strip {
  display: flex; align-items: center; gap: 6px; padding: 7px 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
  background: var(--surface2); min-height: 38px;
}
.corr-metric-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 10px; border-radius: 99px; font-family: var(--font-data);
  font-size: .65rem; font-weight: 500; border: 1px solid; white-space: nowrap; max-width: 240px;
}
.pill-name { overflow: hidden; text-overflow: ellipsis; }
.corr-metric-pill .pill-remove { cursor: pointer; opacity: .6; font-size: .72rem; line-height: 1; flex-shrink: 0; padding: 0 1px; }
.corr-metric-pill .pill-remove:hover { opacity: 1; }
.corr-metric-pill .pill-shift { font-size: .55rem; opacity: .75; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,.12); }
.corr-metric-empty { font-family: var(--font-data); font-size: .65rem; color: var(--text-3); font-style: italic; }
.corr-normalize-btn { margin-left: auto; font-family: var(--font-data); font-size: .62rem; padding: 2px 9px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.corr-normalize-btn.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.corr-chart-emiten-bar { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.corr-chart-emiten-label { font-family: var(--font-data); font-size: .6rem; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.corr-chart-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.corr-chart-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
#corr-hc-container { flex: 1; min-height: 300px; position: relative; }
#corr-hc-inner { width: 100%; height: 100%; min-height: 300px; }
.corr-chart-stat-strip { display: flex; gap: 0; border-top: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.corr-chart-stat { flex: 1; min-width: 80px; padding: 7px 12px; border-right: 1px solid var(--border); }
.corr-chart-stat:last-child { border-right: none; }
.corr-chart-stat-label { font-family: var(--font-data); font-size: .57rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.corr-chart-stat-val { font-family: var(--font-data); font-size: .78rem; font-weight: 500; color: var(--text); }
.corr-chart-loading { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 280px; gap: 8px; font-family: var(--font-data); font-size: .72rem; color: var(--text-3); }

/* ── DataTables pagination override (Transaksi table) ── */
#table-container .dataTables_wrapper { display: flex; flex-direction: column; gap: 0; }
#table-container .dataTables_wrapper .top-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 10px; }
#table-container .dataTables_wrapper .dataTables_paginate { display: flex !important; align-items: center; gap: 4px; }
#table-container .dataTables_wrapper .dataTables_info { display: block !important; font-size: .65rem; color: var(--text-3); padding: 0; white-space: nowrap; }
#table-container .dataTables_paginate .paginate_button {
  padding: 3px 8px; margin: 0 1px; border-radius: 4px; font-family: var(--font-data); font-size: .65rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; line-height: 1;
}
#table-container .dataTables_paginate .paginate_button:hover { background: var(--surface2); }
#table-container .dataTables_paginate .paginate_button.current { background: var(--blue); color: #fff; border-color: var(--blue); }
#table-container .dataTables_paginate .paginate_button.disabled { opacity: .4; pointer-events: none; }
#table-container .dataTables_paginate .ellipsis { padding: 3px 6px; color: var(--text-3); font-size: .65rem; }

/* ── DataTables pagination for Gain List (Chart page) — White Theme ── */
#table-container-gain .dataTables_wrapper,
#table-container .dataTables_wrapper {
  display: flex; flex-direction: column; gap: 0;
  background: #ffffff; color: #111827;
}
#table-container-gain .dataTables_wrapper .top-bar,
#table-container .dataTables_wrapper .top-bar {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 10px;
}
#table-container-gain .dataTables_wrapper .dataTables_paginate,
#table-container .dataTables_wrapper .dataTables_paginate {
  display: flex !important; align-items: center; gap: 4px;
}
#table-container-gain .dataTables_wrapper .dataTables_info,
#table-container .dataTables_wrapper .dataTables_info {
  display: block !important; font-size: .65rem; color: #6b7280; padding: 0; white-space: nowrap;
}
#table-container-gain .dataTables_paginate .paginate_button,
#table-container .dataTables_paginate .paginate_button {
  padding: 4px 12px; border-radius: 4px; font-family: var(--font-data); font-size: .68rem; font-weight: 500;
  border: 1px solid #e5e7eb; background: #ffffff; color: #374151; cursor: pointer;
}
#table-container-gain .dataTables_paginate .paginate_button:hover,
#table-container .dataTables_paginate .paginate_button:hover { background: #f3f4f6; }
#table-container-gain .dataTables_paginate .paginate_button.current,
#table-container .dataTables_paginate .paginate_button.current { background: #2563eb; color: #fff; border-color: #2563eb; }
#table-container-gain .dataTables_paginate .paginate_button.disabled,
#table-container .dataTables_paginate .paginate_button.disabled { opacity: .4; pointer-events: none; }
#table-container-gain .dataTables_paginate .ellipsis,
#table-container .dataTables_paginate .ellipsis { padding: 3px 6px; color: #9ca3af; font-size: .65rem; }

/* Table styles white theme */
#table-container-gain table,
#table-container table,
table.dt-table {
  background: #ffffff; color: #111827; border-collapse: collapse;
}
#table-container-gain table thead th,
#table-container table thead th,
table.dt-table thead th {
  background: #f9fafb; color: #374151; border-bottom: 2px solid #e5e7eb;
  font-weight: 600; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;
}
#table-container-gain table tbody td,
#table-container table tbody td,
table.dt-table tbody td {
  background: #ffffff; color: #374151; border-bottom: 1px solid #f3f4f6; font-size: .7rem;
}
#table-container-gain table tbody tr:hover td,
#table-container table tbody tr:hover td,
table.dt-table tbody tr:hover td { background: #f9fafb; }

/* ── Screener Filter Rows ── */
.filter-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.filter-row.required {
  background: var(--amber-bg);
  border-left: 3px solid var(--amber);
  padding-left: 8px;
  opacity: 0.75;
}
.filter-row.required .sel-metric,
.filter-row.required .sel-op,
.filter-row.required .inp-val {
  background: var(--surface2);
}
.btn-remove {
  background: var(--red-bg); border: 1px solid var(--red-bdr); color: var(--red);
  width: 24px; height: 24px; border-radius: 4px; font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.btn-remove:hover { background: var(--red); color: #fff; }
.btn-remove.disabled {
  background: var(--surface2); border-color: var(--border); color: var(--text-3);
  cursor: not-allowed; opacity: 0.5;
}
.btn-remove.disabled:hover { background: var(--surface2); color: var(--text-3); }
#table-container .btn-export-csv {
  padding: 4px 12px; border-radius: 4px; font-family: var(--font-data); font-size: .68rem; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer;
}
#table-container .btn-export-csv:hover { background: var(--surface2); }

/* ============================================================
   FUNDACHART PAGE
   ============================================================ */

/* Chart controls in nav */
.nav-chart-controls {
  display: flex; align-items: center; gap: 8px;
  margin-right: 8px;
}
.nav-stock-input {
  width: 90px; height: 26px; padding: 3px 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text);
}

.chart-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.chart-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.chart-controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-sub-bar {
  display: none;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 6px;
  align-items: center;
}
.chart-sub-bar .form-control { flex: 1; }

/* ============================================================
   TOKEN MODAL
   ============================================================ */
.token-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.token-modal-overlay.open { display: flex; }
.token-modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; width: 90%; max-width: 420px;
  font-family: var(--font-ui);
}
.token-modal-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
.token-modal-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.token-modal-close {
  background: none; border: none; color: var(--text-3); font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.token-modal-current {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 16px;
  font-size: 0.72rem; font-family: monospace; color: var(--text-3); word-break: break-all;
}
.token-modal-current-label { color: var(--text-3); margin-bottom: 4px; font-family: var(--font-ui); }
.token-modal-label { font-size: 0.72rem; color: var(--text-3); margin-bottom: 5px; display: block; }
.token-modal-textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 11px; color: var(--text);
  font-size: 0.75rem; font-family: monospace; resize: vertical;
  box-sizing: border-box; outline: none;
}
.token-modal-status {
  display: none; font-size: 0.75rem; padding: 8px 11px;
  border-radius: var(--radius); margin-bottom: 12px;
}
.token-modal-footer { display: flex; gap: 8px; justify-content: flex-end; }
.token-modal-cancel {
  background: none; border: 1px solid var(--border); color: var(--text-2);
  padding: 7px 16px; border-radius: var(--radius); font-size: 0.8rem; cursor: pointer;
}
.token-modal-save {
  background: #f59e0b; border: none; color: #000;
  padding: 7px 18px; border-radius: var(--radius); font-size: 0.8rem;
  font-weight: 600; cursor: pointer;
}

/* ============================================================
   RESPONSIVE — BACKTEST + FUNDACHART ADDITIONS
   ============================================================ */
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(4,1fr); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav-chart-controls { display: none; }
  .chart-controls-bar { padding: 8px 12px; display: flex; }
  .chart-controls-left { flex-direction: column; align-items: stretch; gap: 8px; }
  .chart-controls-right { display: none; }
  .chart-sub-bar { display: flex; }
}
@media (max-width: 600px) {
  .stat-strip { grid-template-columns: repeat(2,1fr); }
  .bt-page { padding: 12px 12px 40px; }
  .bt-card { padding: 12px; }
  .corr-chart-dialog { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; border-radius: 0 !important; }
  .bt-data-table td, .bt-data-table th { font-size: .6rem; padding: 4px 5px; }
  .corr-emiten-chips { flex-wrap: wrap; }
  #corr-table th:first-child, #corr-table td:first-child { max-width: 160px; width: 160px; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================
   DARK MODE — prefers-color-scheme & manual toggle
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --bg:        #0f1117;
    --surface:   #1a1d27;
    --surface2:  #232733;
    --border:    #2d3245;
    --border2:   #3d4260;
    --text:      #e5e7eb;
    --text-2:    #9ca3af;
    --text-3:    #6b7280;
    --green-bg:  #064e3b;
    --green-bdr: #065f46;
    --red-bg:    #7f1d1d;
    --red-bdr:   #991b1b;
    --blue-bg:   #1e3a5f;
    --blue-bdr:  #1e40af;
    --amber-bg:  #78350f;
    --amber-bdr: #92400e;
    --accent-2:  #1e3a5f;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow:    0 4px 12px rgba(0,0,0,0.4);
  }
}
:root.dark-mode {
  --bg:        #0f1117;
  --surface:   #1a1d27;
  --surface2:  #232733;
  --border:    #2d3245;
  --border2:   #3d4260;
  --text:      #e5e7eb;
  --text-2:    #9ca3af;
  --text-3:    #6b7280;
  --green-bg:  #064e3b;
  --green-bdr: #065f46;
  --red-bg:    #7f1d1d;
  --red-bdr:   #991b1b;
  --blue-bg:   #1e3a5f;
  --blue-bdr:  #1e40af;
  --amber-bg:  #78350f;
  --amber-bdr: #92400e;
  --accent-2:  #1e3a5f;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow:    0 4px 12px rgba(0,0,0,0.4);
}

/* ── Builder sticky bar (full-width, below nav) ─────────────── */
.builder-sticky-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.builder-sticky-bar > .builder-card {
  max-width: 1440px;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 12px;
}

/* ── Screener / Builder shared styles ─────────────────────── */
.screener-main {
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Builder card ────────────────────────────────────────── */
.builder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

/* collapsed bar (always visible) */
.builder-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.builder-bar select {
  flex: 1;
  min-width: 160px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 10px;
  font-size: 0.85rem; color: var(--text);
  font-family: var(--font-ui); outline: none; cursor: pointer;
}
.btn-builder-toggle {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 12px;
  font-size: 0.8rem; color: var(--text-2);
  cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.btn-builder-toggle:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-2);
}
.builder-chevron {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}
.builder-card.open .builder-chevron { transform: rotate(180deg); }

/* expandable body */
.builder-body {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.builder-card.open .builder-body { display: block; }

/* ── Builder body top row ─────────────────────────────────── */
.builder-top {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.builder-top input[type="text"] {
  flex: 1; min-width: 160px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 10px;
  font-size: 0.85rem; color: var(--text);
  font-family: var(--font-ui); outline: none;
}
.builder-top input[type="text"]:focus { border-color: var(--accent); }
.builder-top select {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 10px;
  font-size: 0.8rem; color: var(--text);
  font-family: var(--font-ui); outline: none; cursor: pointer;
}

/* ── Buy/Sell side-by-side ───────────────────────────────── */
.filter-panels {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}
.filter-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.filter-panel-title {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-panel-title.buy {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.filter-panel-title.sell {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
/* ── Filter rows ─────────────────────────────────────────── */
.filter-rows { display: flex; flex-direction: column; gap: 6px; }
.filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px;
}
.filter-row select, .filter-row input {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 8px;
  font-size: 0.8rem; color: var(--text);
  font-family: var(--font-ui); outline: none;
  max-width: 100%;
}
.filter-row select:focus, .filter-row input:focus { border-color: var(--accent); }
.filter-row .sel-metric { 
  flex: 2; 
  min-width: 140px; 
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-row .sel-metric option {
  white-space: normal;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-row .sel-op     { width: 70px; flex-shrink: 0; }
.filter-row .inp-val    { width: 110px; flex-shrink: 0; font-family: var(--font-data); }
.filter-row .btn-filter-toggle {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 8px;
  font-size: 0.7rem; color: var(--text-3);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all 0.12s;
}
.filter-row .btn-filter-toggle:hover,
.filter-row .btn-filter-toggle.active {
  background: var(--accent-2); color: var(--accent);
  border-color: var(--accent);
}
.filter-row .inp-multiplier {
  width: 70px; flex-shrink: 0;
  font-family: var(--font-data);
}
.filter-row .sel-metric2 {
  flex: 2; min-width: 140px;
}
.filter-row .btn-remove {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 0 4px; flex-shrink: 0; margin-left: auto;
}
.filter-row .btn-remove:hover { color: #dc2626; }
.btn-add-filter {
  background: none; border: 1px dashed var(--border);
  border-radius: 6px; padding: 6px 12px;
  font-size: 0.8rem; color: var(--text-3);
  cursor: pointer; width: 100%; margin-bottom: 14px;
  transition: all 0.12s;
}
.btn-add-filter:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-2); }

/* ── Builder footer ──────────────────────────────────────── */
.builder-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.sort-controls {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-2);
}
.sort-controls select {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 8px;
  font-size: 0.78rem; color: var(--text);
  font-family: var(--font-ui); outline: none;
}
.builder-actions { display: flex; gap: 8px; }
.btn-new {
  background: var(--bg); color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 14px;
  font-size: 0.8rem; font-weight: 500; cursor: pointer;
  transition: all 0.12s;
}
.btn-new:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.btn-run {
  background: var(--accent); color: #fff; border: none;
  border-radius: 7px; padding: 8px 18px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: all 0.12s;
}
.btn-run:hover { background: #1d4ed8; }
.btn-run:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-save {
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 14px;
  font-size: 0.82rem; cursor: pointer;
  transition: all 0.12s;
}
.btn-save:hover { background: var(--bg); }
.btn-del {
  background: none; color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 10px;
  font-size: 0.8rem; cursor: pointer;
  transition: all 0.12s;
}
.btn-del:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }

/* ── Results card ────────────────────────────────────────── */
.results-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.results-status {
  padding: 10px 16px;
  font-size: 0.78rem; color: var(--text-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.results-count {
  font-family: var(--font-data); font-weight: 600;
  color: var(--accent);
}
.results-scroll { overflow-x: auto; }
#results-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.78rem;
}
#results-table th {
  background: var(--bg);
  padding: 8px 12px;
  text-align: left;
  font-size: 0.7rem; font-weight: 600;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky; top: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sticky first column */
#results-table th:first-child,
#results-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 10;
  min-width: 40px;
  max-width: 60px;
  text-align: center;
}
#results-table th:first-child {
  background: var(--bg);
  z-index: 20;
}
/* Sticky Symbol column (column 2) */
#results-table th:nth-child(2),
#results-table td:nth-child(2) {
  position: sticky;
  left: 60px;
  background: var(--surface);
  z-index: 10;
  min-width: 80px;
  max-width: 120px;
  font-weight: 600;
  color: var(--accent);
}
#results-table th:nth-child(2) {
  background: var(--bg);
  z-index: 20;
}
#results-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-data);
  color: var(--text);
  white-space: nowrap;
}
#results-table tr:last-child td { border-bottom: none; }
#results-table tr:hover td { background: var(--bg); }
/* Fix hover on sticky columns */
#results-table tr:hover td:first-child,
#results-table tr:hover td:nth-child(2) { background: var(--bg); }
.col-symbol { font-weight: 600; color: var(--accent); }
.col-company { font-family: var(--font-ui); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.btn-chart {
  background: var(--accent-2); color: var(--accent);
  border: 1px solid #bfdbfe; border-radius: 4px;
  padding: 3px 8px; font-size: 0.7rem; cursor: pointer;
  text-decoration: none; display: inline-block;
  font-family: var(--font-ui); font-weight: 600;
}
.btn-chart:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-fav-stock {
  transition: transform 0.15s;
}
.btn-fav-stock:hover {
  transform: scale(1.2);
}

/* Portfolio table styles - match result-card */
#stock-table.dt-table.display {
  width: 100% !important;
  border-collapse: collapse;
}
#stock-table.dt-table.display th {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
#stock-table.dt-table.display td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
#stock-table.dt-table.display tr:hover td {
  background: var(--bg);
}

/* ── Status / loading ────────────────────────────────────── */
.run-loading {
  text-align: center; padding: 32px;
  color: var(--text-3); font-size: 0.85rem;
}
.run-loading i { font-size: 1.2rem; display: block; margin-bottom: 8px; }

/* ── Results pagination ──────────────────────────────────────── */
.results-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-3);
}
.results-pagination button {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 14px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.12s;
}
.results-pagination button:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}
.results-pagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .filter-panels { flex-direction: column; gap: 10px; }
  .screener-main { padding: 10px; }
  .builder-sticky-bar > .builder-card { padding: 7px 10px; }
}