/* Screener (spec 0113): a full-screen view over the dashboard. Uses the page's theme variables. */
/* Above the header (970) and its edge strips (960); below toasts (1000) and dialogs (2000). */
.scr { position: fixed; inset: 0; z-index: 990; background: var(--bg); color: var(--text); display: flex; flex-direction: column;
  font-family: var(--font-sans); font-size: 13px; }
.scr[hidden] { display: none; }
.scr-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.scr-top h1 { font-size: 15px; margin: 0; font-weight: 700; }
.scr-top .scr-close { margin-left: auto; }
.scr-body { flex: 1; overflow: auto; padding: 10px 16px 40px; display: flex; flex-direction: column; gap: 10px; }
.scr-muted { color: var(--text-muted); }
.scr-grow { flex: 1; }
.scr-pos { color: var(--accent-green); }
.scr-neg { color: var(--accent-red); }

/* One compact panel: criteria, scan, check a wallet, send to Telegram (REQ-15). */
.scr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.scr-crit { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: flex-end; }
.scr-crit label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--text-secondary); }
.scr-crit label.scr-check { flex-direction: row; align-items: center; gap: 5px; color: var(--text); font-size: 11px; padding-bottom: 4px; }
.scr-crit input[type="number"] { width: 56px; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--elevated);
  color: var(--text); font-family: var(--font-mono); font-size: 11px; }
.scr-crit input.scr-scan-field { border-color: var(--accent-yellow); }
.scr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Spec 0113: leaderboard depth, beside the Scan button. */
.scr-crit label.scr-depth input { width: 56px; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--accent-yellow); background: var(--elevated);
  color: var(--text); font-family: var(--font-mono); font-size: 11px; }
.scr-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; align-self: center; }
.scr-crit .scr-search { flex: 1 1 160px; width: auto; min-width: 140px; }
.scr-crit .scr-progress { align-self: center; }
.scr-line { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.scr-line b { color: var(--text); font-weight: 600; }
.scr-warn { color: var(--accent-yellow); font-size: 11px; }
.scr-progress { width: 160px; height: 6px; border-radius: 3px; background: var(--elevated); overflow: hidden; }
.scr-progress > i { display: block; height: 100%; background: var(--accent-blue); width: 0; transition: width 0.2s; }
.scr-status { color: var(--text-secondary); font-size: 11px; }
.scr-search { padding: 3px 7px; border-radius: 5px; border: 1px solid var(--border); background: var(--elevated); color: var(--text); width: 240px; max-width: 100%; font-size: 12px; }
.scr-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.scr-note-line { color: var(--text-secondary); font-size: 12px; margin: 6px 0; display: flex; align-items: center; gap: 8px; }

.scr-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.scr-tabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); padding: 7px 11px; font-weight: 600; cursor: pointer; font-size: 13px; }
.scr-tabs button.on { color: var(--text); border-bottom-color: var(--accent-blue); }
.scr-empty { color: var(--text-secondary); padding: 18px 4px; }

/* Report tab: the Telegram messages as they are sent. */
.scr-msgs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.scr-msgs .scr-msg { width: 760px; max-width: 100%; box-sizing: border-box; }
/* D-50: the ranked table's message is as wide as its table, so the verdict icons show. */
.scr-msgs .scr-msg-table { width: fit-content; }
.scr-msg { background: var(--elevated); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; line-height: 1.45; word-break: break-word; }
.scr-msg pre { margin: 4px 0; font-family: var(--font-mono); font-size: 12px; white-space: pre; overflow-x: auto; }
.scr-msg a { color: var(--accent-blue); }

/* Tables (Wallets, Crowded markets). */
.scr-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.scr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.scr-table th { text-align: left; color: var(--text-secondary); font-weight: 600; padding: 5px 7px; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--surface); position: sticky; top: 0; }
.scr-table th[data-sort] { cursor: pointer; }
.scr-table th.on { color: var(--text); }
.scr-table th.scr-filter { padding: 3px 5px; top: 26px; }
.scr-table th.scr-filter input, .scr-table th.scr-filter select { width: 100%; min-width: 46px; box-sizing: border-box; padding: 2px 4px; font-size: 11px;
  border-radius: 4px; border: 1px solid var(--border); background: var(--elevated); color: var(--text); }
.scr-table th.scr-filter input[type="number"] { width: 50%; min-width: 44px; }
.scr-table td { padding: 5px 7px; border-bottom: 1px solid var(--border); vertical-align: top; }
.scr-table td.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.scr-table a { color: var(--text); }
.scr-wallets td { font-family: var(--font-mono); white-space: nowrap; }
.scr-wallets td.scr-c-name, .scr-wallets td.scr-c-topCat { font-family: var(--font-sans); }
.scr-wrow { cursor: pointer; }
.scr-wrow:hover td, .scr-wrow.on td { background: var(--elevated); }
.scr-expand > td { background: var(--bg); padding: 8px; font-family: var(--font-sans); white-space: normal; }
/* The table is wider than the screen: keep the open card in view at the left. */
.scr-expand .scr-card { position: sticky; left: 8px; max-width: calc(100vw - 64px); box-sizing: border-box; }
.scr-dots { letter-spacing: -1px; font-size: 10px; }
.scr-who { display: flex; flex-wrap: wrap; gap: 4px; }
.scr-who span { background: var(--elevated); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.scr-crowd-ctl { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 6px 0; font-size: 12px; }
.scr-crowd-ctl label { display: inline-flex; align-items: center; gap: 5px; }

/* Wallet cards (REQ-28). */
.scr-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.scr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.scr-card.flag-interesting { border-color: var(--accent-blue-line); }
.scr-card.flag-avoid { opacity: 0.8; }
.scr-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.scr-name { font-weight: 700; }
.scr-card-head .scr-name { font-size: 15px; }
.scr-tier { font-size: 15px; }
.scr-link { color: var(--accent-blue); font-size: 12px; text-decoration: none; }
.scr-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.scr-stats-grid > div { background: var(--elevated); border-radius: 6px; padding: 5px 8px; display: flex; flex-direction: column; gap: 1px; }
.scr-stats-grid span { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.scr-stats-grid b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.scr-stats-grid small { color: var(--text-muted); font-weight: 400; }
.scr-redflags { margin: 0; padding: 0; list-style: none; color: var(--accent-yellow); font-size: 12px; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.scr-badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-secondary); }
.scr-badge.fail { color: var(--accent-red); border-color: var(--accent-red); }
.scr-badge.pass { color: var(--accent-green); border-color: var(--accent-green); }
.scr-cats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; align-items: center; }
.scr-cats label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: var(--elevated); border-radius: 12px; padding: 1px 8px 1px 4px; }
.scr-card-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; margin-left: auto; white-space: nowrap; }
.scr-card-head .scr-uncheck { padding-left: 8px; padding-right: 8px; }
.scr-note { min-width: 160px; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--border); background: var(--elevated); color: var(--text); font-size: 12px; }
.scr-detail { white-space: pre-wrap; background: var(--elevated); border-radius: 8px; padding: 8px 10px; line-height: 1.45; }
.scr-detail a { color: var(--accent-blue); }

/* Wallet check: time frames and charts (0113 REQ-33, REQ-34, REQ-38; 0113 REQ-35, REQ-36). */
.scr-check-charts { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 14px; }
.scr-chart-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.scr-chart-total { font-size: 12px; color: var(--text-secondary); }
.scr-frames { display: flex; gap: 4px; }
.scr-frames .btn-sm.on { background: var(--accent-blue-dim); border-color: var(--accent-blue); color: var(--text); }
/* Each chart in its own panel, with room between them (0113 REQ-35). */
.scr-panel-chart { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px 14px; box-sizing: border-box;
  display: flex; flex-direction: column; min-width: 0; height: 100%; }
/* One header style for every chart, on one baseline (0113 REQ-36). */
.scr-chart-head { display: flex; align-items: baseline; gap: 8px; min-height: 18px; margin-bottom: 10px; }
.scr-chart-head h3 { margin: 0; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);
  font-weight: 600; white-space: nowrap; }
.scr-chart-head .scr-muted { font-size: 11px; }
/* Pies and line chart in one row; they wrap only when the screen is narrow (REQ-34). */
.scr-chart-row { display: grid; grid-template-columns: 240px 240px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.scr-pie-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scr-pie path, .scr-pie circle { transition: opacity 0.15s; }
.scr-pie .scr-faded { opacity: 0.18; }
.scr-share { font-size: 11px; color: var(--text-secondary); }
.scr-share b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.scr-legend { list-style: none; margin: 0; padding: 0; font-size: 11px; width: 100%; display: flex; flex-direction: column; gap: 3px; }
.scr-legend li { display: flex; align-items: center; gap: 6px; }
.scr-legend li.scr-faded { opacity: 0.4; }
.scr-legend span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-legend b { font-family: var(--font-mono); font-weight: 600; }
.scr-legend i, .scr-chip i, .scr-dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; }
.scr-dot { margin-right: 6px; }
.scr-line-box { min-width: 0; }
/* Top 10 trades (0113 REQ-43). */
.scr-top-trades .scr-table td { white-space: nowrap; }
.scr-top-trades .scr-tt-market { white-space: normal; min-width: 220px; }
.scr-top-trades .scr-table th.num { text-align: right; }
.scr-top-trades th.scr-tt-sort { cursor: pointer; user-select: none; }
.scr-top-trades th.scr-tt-sort:hover, .scr-top-trades th.scr-tt-sort.on { color: var(--text); }
.scr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.scr-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px 2px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--elevated); color: var(--text); user-select: none; }
.scr-chip.off { opacity: 0.4; text-decoration: line-through; }
.scr-line-wrap { position: relative; }
.scr-line-chart { display: block; width: 100%; height: auto; background: var(--elevated); border-radius: 8px; cursor: crosshair; }
.scr-line-chart text { fill: var(--text-secondary); font-size: 10px; font-family: var(--font-mono); }
.scr-line-chart .scr-grid { stroke: var(--border); stroke-opacity: 0.6; }
.scr-line-chart .scr-zero { stroke: var(--border-hover); stroke-dasharray: 3 3; }
/* The crosshair and its axis tags: as see-through as they can be while still readable (REQ-38). */
.scr-cross-line { stroke: var(--text-secondary); stroke-opacity: 0.45; stroke-dasharray: 2 3; pointer-events: none; }
.scr-cross-tag { fill: var(--surface); fill-opacity: 0.55; pointer-events: none; }
.scr-line-chart .scr-cross-text { fill: var(--text); font-size: 10px; pointer-events: none; }
.scr-hover-box { position: absolute; pointer-events: none; z-index: 2; min-width: 150px; max-width: 260px; padding: 6px 8px; border-radius: 6px;
  font-size: 11px; background: rgba(13, 17, 23, 0.45); border: 1px solid rgba(139, 157, 184, 0.25); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; gap: 1px; color: var(--text); }
:root[data-theme="light"] .scr-hover-box { background: rgba(255, 255, 255, 0.55); }
.scr-hover-box div { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; }
.scr-hover-box b { font-family: var(--font-mono); font-weight: 600; }
@media (max-width: 1100px) { .scr-chart-row { grid-template-columns: 1fr 1fr; } .scr-line-box { grid-column: 1 / -1; } }
@media (max-width: 640px) { .scr-chart-row { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .scr-body { padding: 8px 8px 40px; }
  .scr-search { width: 100%; }
  .scr-sep { display: none; }
}

/* Card layout (0113 D-32 – D-34): stats boxes with the flag buttons at the top right; category ticks in aligned columns. */
.scr-card-top { display: flex; align-items: flex-start; gap: 10px; }
.scr-card-top .scr-stats-grid { flex: 1; min-width: 0; }
.scr-flagbox { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex: 0 0 auto; }
.scr-flagbox .btn-sm.on { border-color: var(--accent-blue); color: var(--text); }
.scr-flagbox .scr-note { min-width: 0; width: 160px; box-sizing: border-box; }
.scr-cats.scr-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 8px; justify-items: stretch; }
.scr-cat-grid label { box-sizing: border-box; min-width: 0; }
.scr-cat-grid label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-cat-grid .btn-sm { justify-self: start; }
.scr-tag-row label { padding-right: 10px; }
@media (max-width: 640px) { .scr-card-top { flex-direction: column; } .scr-flagbox { flex-direction: row; flex-wrap: wrap; } }

/* Wallets table (0113 D-35): a scroll bar above it, Verdict and Wallet fixed at the left. */
.scr-hscroll { overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: 2px; }
.scr-hscroll[hidden] { display: none; }
.scr-hscroll > div { height: 1px; }
.scr-wallets .scr-c-tier, .scr-wallets .scr-c-name { position: sticky; z-index: 1; background: var(--bg); }
.scr-wallets th.scr-c-tier, .scr-wallets th.scr-c-name { z-index: 3; background: var(--surface); }
.scr-wallets .scr-c-tier { left: 0; width: 60px; min-width: 60px; max-width: 60px; box-sizing: border-box; }
.scr-wallets .scr-c-tier select { min-width: 0; }
.scr-wallets .scr-c-name { left: 60px; box-shadow: inset -1px 0 var(--border); }
.scr-wrow:hover td.scr-c-tier, .scr-wrow:hover td.scr-c-name, .scr-wrow.on td.scr-c-tier, .scr-wrow.on td.scr-c-name { background: var(--elevated); }

/* Kelly by category and Risk Management (0113 D-36 – D-38). */
.scr-kelly .scr-chart-head { flex-wrap: wrap; }
.scr-kelly .scr-table td, .scr-risk td { white-space: nowrap; }
.scr-kelly .scr-table th.num, .scr-risk th.num { text-align: right; }
.scr-risk-ctl { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 6px 0; font-size: 12px; }
.scr-risk-ctl label { display: inline-flex; align-items: center; gap: 5px; }
.scr-risk-ctl input, .scr-risk-ctl select { padding: 3px 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--elevated);
  color: var(--text); font-size: 12px; }
.scr-risk-ctl input { width: 90px; font-family: var(--font-mono); }
.scr-risk-stats { margin-bottom: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.scr-risk-stats small { margin-left: 4px; }
.scr-weight { position: relative; min-width: 90px; }
.scr-weight i { position: absolute; left: 0; top: 4px; bottom: 4px; background: var(--accent-blue-dim); border-radius: 3px; }
.scr-weight b { position: relative; font-weight: 600; }