:root{
  --bg:#0c1923;
  --panel:#0f202d;
  --text:#e6f1ff;
  --muted:#a3b3c2;
  --good:#1dd19c;
  --bad:#ff5b6e;
  --accent:#51a6ff;
  --header:#112635;
  --border:#1a3b52;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.4 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
}
.bar{
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(180deg,var(--header),#0f1e2b);
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  display:flex;
  gap:16px;
  align-items:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.title{font-weight:700}
.controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.controls input[type="number"],
.controls input[type="text"]{height:28px; padding:4px 6px; background:#07141e; color:var(--text); border:1px solid var(--border); border-radius:6px; min-width:80px}
.controls button{height:30px; background:#0d2c44; color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 10px; cursor:pointer}
.controls button:hover{filter:brightness(1.2)}
#status{margin-left:8px; color:var(--muted)}

.hint{padding:10px 14px; color:var(--muted)}

.table-wrap{
  position:relative;
  height:calc(100vh - 110px);
  overflow:auto;
  border-top:1px solid var(--border);
}

table.screener{width:100%; border-collapse:separate; border-spacing:0}
.screener thead th{
  position:sticky; top:0; z-index:10;
  background:var(--header);
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  text-align:left;
  user-select:none;
}
.screener tbody td{
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  white-space:nowrap;
}
.screener tbody tr:hover{background:#0f2433}
.sym a{ color:#5ee0ff; text-decoration:none; font-weight:600 }
.sym a:hover{ text-decoration:underline }
.good{color:var(--good)} .bad{color:var(--bad)} .muted{color:var(--muted)}
.exch{ display:inline-block; padding:2px 8px; border-radius:10px; background:#0d2c44; font-size:12px; color:#9fd0ff; }
.drag-handle{cursor:grab; opacity:.7; margin-right:6px}
th.sortable{cursor:pointer}
th.sortable .arrow{opacity:.5; margin-left:4px}
th.dragging{opacity:.3}

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center}
.modal.hidden{display:none}
.modal-card{width:min(940px,96vw); background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:var(--header); border-bottom:1px solid var(--border)}
.modal-head h3{margin:0}
.modal-head button{background:#0d2c44; color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 8px; cursor:pointer}
.modal-body{display:flex; gap:24px; padding:16px}
.modal-body .cols{display:flex; gap:24px; flex-wrap:wrap}
.modal-body .col{min-width:200px; display:flex; flex-direction:column; gap:8px}
.modal-body label{display:flex; gap:8px; align-items:center}
.perf{margin-top:8px}
.modal-actions{padding:12px 14px; border-top:1px solid var(--border); display:flex; justify-content:flex-end}
.modal-actions button{background:#0d2c44; color:var(--text); border:1px solid var(--border); border-radius:6px; padding:6px 12px; cursor:pointer}

/* chart row */
.chart-row td{padding:0 !important; border-bottom:none}
.chart-wrap{height:380px; border-top:1px solid var(--border)}