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

:root {
  --bg:       #0b0e14;
  --bg2:      #131821;
  --bg3:      #1a202c;
  --border:   #252d3a;
  --text:     #e2e8f0;
  --text2:    #8892a4;
  --accent:   #3b82f6;
  --green:    #22c55e;
  --red:      #ef4444;
  --yellow:   #eab308;
  --blue:     #3b82f6;
  --font:     'SF Mono','Fira Code','Consolas',monospace;
  --radius:   8px;
}

html, body { height:100%; background:var(--bg); color:var(--text); font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif }
body { overflow:hidden }

#app { display:flex; height:100vh }

/* ── Sidebar ── */
#sidebar {
  width:240px; min-width:240px;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.logo {
  padding:20px 18px 12px;
  font-size:20px; font-weight:700; letter-spacing:-0.5px;
}
.logo span { color:var(--accent) }
.sidebar-label {
  padding:8px 18px 4px;
  font-size:11px; font-weight:600;
  color:var(--text2); letter-spacing:1.2px;
}
#screener-list { flex:1; overflow-y:auto; padding:4px 10px 10px }
#screener-list::-webkit-scrollbar { width:4px }
#screener-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px }

.screener-btn {
  display:block; width:100%;
  padding:10px 14px; margin-bottom:4px;
  background:transparent; border:1px solid transparent; border-radius:var(--radius);
  color:var(--text); font-size:13px; text-align:left; cursor:pointer;
  transition:all 0.15s;
  position:relative;
}
.screener-btn:hover { background:var(--bg3); border-color:var(--border) }
.screener-btn.active {
  background:rgba(59,130,246,0.12);
  border-color:var(--accent);
  color:#fff;
}
.screener-btn .count-badge {
  float:right;
  background:var(--bg3); color:var(--text2);
  font-size:11px; padding:1px 8px; border-radius:10px;
}
.screener-btn.active .count-badge { background:rgba(59,130,246,0.2); color:var(--accent) }
.screener-btn .screener-date {
  display:block; font-size:11px; color:var(--text2); margin-top:2px;
}

.sidebar-footer {
  padding:12px 18px;
  font-size:11px; color:var(--text2);
  border-top:1px solid var(--border);
}

/* ── Main ── */
#main { flex:1; display:flex; flex-direction:column; overflow:hidden }

/* Toolbar */
#toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.toolbar-left { display:flex; align-items:center; gap:12px }
.toolbar-left h2 { font-size:18px; font-weight:600 }
.badge {
  background:var(--bg3); color:var(--text2);
  font-size:12px; padding:2px 10px; border-radius:12px;
}
.toolbar-right { display:flex; align-items:center; gap:8px }
.date-label { font-size:13px; color:var(--text2) }
#date-select {
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:6px 12px; font-size:13px; cursor:pointer;
  outline:none;
}
#date-select:focus { border-color:var(--accent) }

/* Content */
#content { flex:1; overflow-y:auto; padding:20px 24px }
#content::-webkit-scrollbar { width:6px }
#content::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px }

/* Placeholder */
.placeholder-card {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  height:60%; color:var(--text2);
}
.placeholder-icon { font-size:48px; margin-bottom:16px; opacity:0.3 }

/* Loading */
#loading { display:flex; flex-direction:column; align-items:center; padding:60px 0 }
.spinner {
  width:32px; height:32px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.7s linear infinite;
  margin-bottom:12px;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* Table */
#table-wrap { width:100% }
#result-table {
  width:100%; border-collapse:collapse;
  font-size:13px;
}
#result-table th {
  position:sticky; top:0; z-index:2;
  background:var(--bg3);
  color:var(--text2); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.8px;
  padding:10px 12px; text-align:left;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}
#result-table td {
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
#result-table tr:hover td { background:rgba(59,130,246,0.04) }

/* Column alignment */
#result-table td:is(.num,.score-col) { text-align:right; font-family:var(--font) }
#result-table th:is(.num,.score-col) { text-align:right }

/* Colors */
.text-green  { color:var(--green) }
.text-red    { color:var(--red) }
.text-yellow { color:var(--yellow) }
.text-blue   { color:var(--blue) }
.text-muted  { color:var(--text2) }

.detail-json {
  font-size:11px; color:var(--text2);
  max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer;
}
.detail-json:hover { color:var(--text); white-space:normal; word-break:break-all }

.signal-badge {
  display:inline-block;
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px;
}
.signal-badge.bullish  { background:rgba(34,197,94,0.15); color:var(--green) }
.signal-badge.bearish  { background:rgba(239,68,68,0.15); color:var(--red) }
.signal-badge.neutral  { background:rgba(138,146,164,0.15); color:var(--text2) }
.signal-badge.golden   { background:rgba(234,179,8,0.15); color:var(--yellow) }
.signal-badge.death    { background:rgba(239,68,68,0.15); color:var(--red) }
.signal-badge.above    { background:rgba(59,130,246,0.15); color:var(--blue) }
.signal-badge.below    { background:rgba(239,68,68,0.15); color:var(--red) }
.signal-badge.overbought { background:rgba(234,179,8,0.15); color:var(--yellow) }
.signal-badge.oversold { background:rgba(59,130,246,0.15); color:var(--blue) }
.signal-badge.surge    { background:rgba(34,197,94,0.15); color:var(--green) }
.signal-badge.near_high { background:rgba(34,197,94,0.15); color:var(--green) }
.signal-badge.near_low  { background:rgba(239,68,68,0.15); color:var(--red) }

.ticker-link {
  font-family:var(--font); font-weight:600;
  color:var(--accent); text-decoration:none;
}
.ticker-link:hover { text-decoration:underline }