* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

h1 { font-size: 20px; margin: 0; }
.sub { color: var(--muted); font-size: 12px; }

.status { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.auto { display: flex; align-items: center; gap: 6px; cursor: pointer; }

button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 14px;
}
button:hover { filter: brightness(1.15); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
}

.filters label { color: var(--muted); display: flex; align-items: center; gap: 6px; }

input[type="text"], input[type="number"], select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
}
input[type="text"] { width: 240px; }
input[type="number"] { width: 90px; }
input:focus, select:focus { outline: 1px solid var(--accent); }

.counter { color: var(--muted); margin-left: auto; }

main { display: flex; gap: 16px; padding: 16px 20px; align-items: flex-start; }

.table-wrap { flex: 1; overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th {
  background: var(--panel2);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  position: sticky;
  top: 0;
}
th:hover { color: var(--accent); }
th.sorted-asc::after { content: " ▲"; color: var(--accent); }
th.sorted-desc::after { content: " ▼"; color: var(--accent); }

.num { text-align: right; font-variant-numeric: tabular-nums; }

tbody tr { cursor: pointer; transition: background 0.12s; }
tbody tr:hover { background: var(--panel2); }
tbody tr.selected { background: var(--row-cell); }

td.ticker { font-weight: 700; color: var(--accent); }
.up { color: var(--up); }
.down { color: var(--down); }

.loading { text-align: center; color: var(--muted); padding: 30px; }

.detail {
  width: 560px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 16px;
  position: relative;
}
.detail.hidden { display: none; }

#closeDetail {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  color: var(--muted);
  padding: 4px 8px;
}
#closeDetail:hover { color: var(--text); }

.detail h2 { margin: 0 0 10px; font-size: 18px; }

.d-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.d-stats .stat {
  background: var(--panel2);
  border-radius: 6px;
  padding: 8px 10px;
}
.d-stats .k { color: var(--muted); font-size: 11px; }
.d-stats .v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

#chart { width: 100%; height: auto; background: var(--bg); border-radius: 8px; }
.d-note { color: var(--muted); font-size: 12px; margin-top: 8px; }

footer {
  padding: 12px 20px;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1100px) {
  main { flex-direction: column; }
  .detail { width: 100%; }
}

/* --- Фаза 2: риски --- */
button.secondary {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}
button.secondary:hover { border-color: var(--accent); }

.risk-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.risk-low { background: var(--up-soft); color: var(--up); }
.risk-mid { background: var(--warn-soft); color: var(--warn); }
.risk-high { background: var(--down-soft); color: var(--down); }
.risk-na { background: var(--panel2); color: var(--muted); }

.calc {
  background: var(--panel2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}
.calc h3 { margin: 0 0 10px; font-size: 14px; }
.calc .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.calc label { color: var(--muted); flex: 1; }
.calc input { width: 120px; }
.calc .result { color: var(--text); font-variant-numeric: tabular-nums; }
.calc .result b { color: var(--accent); }

.modal {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  width: 380px;
}
.modal-box h3 { margin-top: 0; }
.muted { color: var(--muted); font-size: 12px; }
.grid-form {
  display: grid;
  grid-template-columns: 1fr 70px 70px;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
.grid-form input { width: 70px; }
.modal-actions { display: flex; justify-content: space-between; margin-top: 14px; }

/* --- Кнопка-справка ⓘ --- */
.k .info, .calc h3 .info, .vd-score .info, .sig-stats h3 .info {
  display: inline-block;
  color: var(--muted);
  cursor: help;
  margin-left: 4px;
  font-size: 11px;
  position: relative;
}
.k .info:hover, .k .info:focus,
.calc h3 .info:hover, .calc h3 .info:focus,
.vd-score .info:hover, .vd-score .info:focus,
.sig-stats h3 .info:hover, .sig-stats h3 .info:focus { color: var(--accent); }

.k .info::after, .calc h3 .info::after, .vd-score .info::after, .sig-stats h3 .info::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 130%;
  width: 240px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  z-index: 60;
  display: none;
  box-shadow: 0 6px 18px var(--shadow);
}
.k .info:hover::after, .k .info:focus::after,
.calc h3 .info:hover::after, .calc h3 .info:focus::after,
.vd-score .info:hover::after, .vd-score .info:focus::after,
.sig-stats h3 .info:hover::after, .sig-stats h3 .info:focus::after { display: block; }

/* --- Выбор зоны интереса --- */
.zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.zone-row label { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.zone-row select { padding: 4px 8px; font-size: 13px; }
#zoneInfo { margin-left: auto; font-size: 11px; text-align: right; }

/* --- Кнопки диапазона графика --- */
.range-row { display: flex; gap: 6px; margin-top: 10px; }
.range-row button {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 5px 14px;
  font-size: 13px;
  flex: 1;
}
.range-row button:hover { color: var(--text); border-color: var(--accent); }
.range-row button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* --- Фаза 3: избранное, сканы, пресеты --- */
.star-col { width: 30px; text-align: center; }
.star { color: var(--muted); font-size: 15px; cursor: pointer; }
.star:hover { color: var(--warn); }
.star.on { color: var(--warn); }

.bo-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.bo-confirmed { background: var(--up-soft); color: var(--up); }
.bo-touch { background: var(--warn-soft); color: var(--warn); }

input.narrow { width: 62px; }
button.icon { padding: 6px 10px; }

#indexQuote { font-weight: 600; font-variant-numeric: tabular-nums; }
#preset { max-width: 240px; }

/* --- Тренд и статистика сигналов --- */
.trend-badge { font-size: 12px; font-weight: 600; white-space: nowrap; }
.trend-badge.muted { color: var(--muted); }

.sig-stats {
  background: var(--panel2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}
.sig-stats h3 { margin: 0 0 8px; font-size: 13px; }
.sig-stats .sig-line { font-size: 13px; padding: 3px 0; font-variant-numeric: tabular-nums; }

/* --- Подсказки: не вылезают за край карточки --- */
.k .info.tip-left::after, .calc h3 .info.tip-left::after, .vd-score .info.tip-left::after, .sig-stats h3 .info.tip-left::after { left: auto; right: 0; }
.k .info.tip-center::after, .calc h3 .info.tip-center::after, .vd-score .info.tip-center::after, .sig-stats h3 .info.tip-center::after { left: 50%; transform: translateX(-50%); }

/* --- Сводный вердикт (FR-37) --- */
.verdict {
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}
.vd-buy     { border-left-color: var(--up);    background: var(--up-tint); }
.vd-cbuy    { border-left-color: var(--up-alt);      background: var(--up-tint); }
.vd-neutral { border-left-color: var(--muted); background: var(--neutral-tint); }
.vd-caution { border-left-color: var(--warn);      background: var(--warn-tint); }
.vd-avoid   { border-left-color: var(--down);  background: var(--down-tint); }
.vd-buy .vd-label, .vd-cbuy .vd-label { color: var(--up); }
.vd-caution .vd-label { color: var(--warn); }
.vd-avoid .vd-label { color: var(--down); }

.vd-head { display: flex; justify-content: space-between; align-items: baseline; }
.vd-label { font-size: 16px; font-weight: 700; }
.vd-score { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.vd-score .info { margin-left: 4px; }

.vd-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--down), var(--warn) 50%, var(--up));
  margin: 12px 0 10px;
}
.vd-marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 12px;
  background: var(--on-accent);
  border-radius: 2px;
  box-shadow: 0 0 4px var(--shadow-strong);
}
.vd-lines div { font-size: 12.5px; padding: 2px 0; color: var(--text); }
.vd-disclaimer { font-size: 11px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--muted); line-height: 1.45; }
.vd-entry { font-size: 13px; margin: 8px 0 4px; line-height: 1.45; }
.vd-entry b { color: var(--up); font-variant-numeric: tabular-nums; }
.vd-entry .muted { font-size: 12px; }
.vd-badge { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.vd-badge.vd-buy { color: var(--up); background: var(--up-soft); }
.vd-badge.vd-cbuy { color: var(--up-alt); background: var(--up-soft); }
.vd-badge.vd-neutral { color: var(--muted); background: var(--neutral-soft); }
.vd-badge.vd-caution { color: var(--warn); background: var(--warn-soft); }
.vd-badge.vd-avoid { color: var(--down); background: var(--down-soft); }
.order-btn { width: 100%; margin: 10px 0 4px; }
.order-box { margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--neutral-tint); }
.order-box .d-stats { margin-bottom: 6px; }
.op-warn { color: var(--warn); font-size: 12.5px; margin: 6px 0; }

/* --- Алерты (FR-40) --- */
.bell { margin-left: 4px; cursor: help; }
tr.alert-hit { background: var(--warn-soft); animation: alert-pulse 1.2s ease-in-out infinite; }
@keyframes alert-pulse { 0%, 100% { background: var(--warn-soft); } 50% { background: var(--warn-pulse); } }
.alerts-block { margin: 12px 0 4px; }
.alerts-block h3 { font-size: 13.5px; margin-bottom: 6px; }
.alert-form { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.alert-form select { max-width: 200px; }
.alert-form input { width: 110px; }
.alert-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.alert-item:last-child { border-bottom: none; }

/* --- Сворачиваемый калькулятор --- */
.calc h3.calc-toggle { cursor: pointer; user-select: none; }
.calc h3.calc-toggle:hover { color: var(--accent); }
.calc .chev { float: right; color: var(--muted); }
#calcBody.hidden { display: none; }

/* --- Фаза 5: ширина рынка, сектора, бэктест, агентский API --- */
.viewnav {
  display: flex;
  gap: 6px;
  padding: 10px 20px 0;
  background: var(--panel2);
}
.viewnav button, .viewnav-page {
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  padding: 7px 18px;
  font-size: 13px;
  text-decoration: none;
}
.viewnav button:hover, .viewnav-page:hover { color: var(--text); border-color: var(--accent); }
.viewnav button.active {
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  border-color: var(--border);
  box-shadow: inset 0 2px 0 var(--accent);
}

.panel {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.panel.hidden, .table-wrap.hidden, #detail.hidden { display: none; }
.panel table { margin-top: 10px; }
.panel-h { font-size: 14px; margin: 14px 0 8px; }

.ad-chart {
  width: 100%;
  height: 300px;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  color: var(--muted);
}
.ad-chart:empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-chart:empty::before { content: 'Нет данных'; }
.ad-chart svg { display: block; }
.sectors-h {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.sectors-table-wrap { overflow-x: auto; }

/* Бейдж здоровья рынка в шапке */
#healthBadge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
#healthBadge.health-good { background: var(--up-soft); color: var(--up); }
#healthBadge.health-neutral { background: var(--warn-soft); color: var(--warn); }
#healthBadge.health-bad { background: var(--down-soft); color: var(--down); }
#healthBadge:empty { display: none; }

/* Баннер здоровья в панели breadth */
.health-banner {
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}
.health-banner.health-good { border-left-color: var(--up); background: var(--up-tint); }
.health-banner.health-neutral { border-left-color: var(--warn); background: var(--warn-tint); }
.health-banner.health-bad { border-left-color: var(--down); background: var(--down-tint); }
.health-banner .hb-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.health-banner.health-good .hb-title { color: var(--up); }
.health-banner.health-neutral .hb-title { color: var(--warn); }
.health-banner.health-bad .hb-title { color: var(--down); }
.health-banner .hb-comp { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.health-banner .hb-comp b { color: var(--text); font-weight: 600; }

/* Прогресс-бары участия */
.pct-bar {
  position: relative;
  height: 14px;
  background: var(--bg);
  border-radius: 7px;
  overflow: hidden;
  margin-top: 4px;
}
.pct-bar > div { height: 100%; border-radius: 7px; }
.pct-bar .fill-up { background: linear-gradient(90deg, var(--up-strong), var(--up)); }
.pct-fill-amber { background: linear-gradient(90deg, var(--warn-strong), var(--warn)); }

/* ⓘ в заголовках панелей */
.panel-h .info, th .info {
  display: inline-block;
  color: var(--muted);
  cursor: help;
  margin-left: 4px;
  font-size: 11px;
  position: relative;
}
.panel-h .info:hover, th .info:hover { color: var(--accent); }
.panel-h .info::after, th .info::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 130%;
  width: 240px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  z-index: 60;
  display: none;
  box-shadow: 0 6px 18px var(--shadow);
}
.panel-h .info:hover::after, th .info:hover::after { display: block; }

td .leader-list { font-size: 12px; font-variant-numeric: tabular-nums; }

/* --- Фаза 8: «контекст открытия» и колонка ML --- */
.gap-chip {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gap-chip.up { color: var(--up); border-color: var(--up-border); }
.gap-chip.down { color: var(--down); border-color: var(--down-border); }
.gap-chip.hidden { display: none; }
.ml-badge {
  display: inline-block;
  min-width: 34px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ml-bull { background: var(--up-soft); color: var(--up); }
.ml-bear { background: var(--down-soft); color: var(--down); }
.ml-neutral { background: var(--panel2); color: var(--muted); }

/* --- Адаптив для мобильных (≤768px и ≤480px) --- */
@media (max-width: 768px) {
  body { font-size: 13.5px; }

  header { padding: 10px 12px; gap: 6px; }
  h1 { font-size: 17px; width: 100%; }
  .status { flex-wrap: wrap; gap: 8px; font-size: 12px; width: 100%; }
  .auto { font-size: 12px; }

  /* вкладки не помещаются — горизонтальная прокрутка */
  .viewnav { overflow-x: auto; padding: 8px 12px 0; -webkit-overflow-scrolling: touch; }
  .viewnav button, .viewnav-page { flex-shrink: 0; padding: 7px 12px; font-size: 12.5px; }

  .filters { gap: 8px; padding: 10px 12px; }
  .filters label { font-size: 12px; gap: 4px; }
  input[type="text"] { width: 170px; max-width: 46vw; }
  input[type="number"] { width: 78px; }
  #preset { max-width: 60vw; }
  .counter { width: 100%; margin-left: 0; }

  main { padding: 10px 12px; gap: 10px; }
  .panel { padding: 10px; }

  /* таблица: компактнее + «липкие» колонки ★ и тикер при горизонтальном скролле */
  th, td { padding: 6px 7px; font-size: 12px; }
  .star-col { position: sticky; left: 0; z-index: 3; background: var(--panel2); }
  td.star-col { background: var(--panel); }
  tbody tr:hover td.star-col { background: var(--panel2); }
  tbody tr.selected td.star-col { background: var(--row-cell); }
  #screener td:nth-child(2), #screener th:nth-child(2) {
    position: sticky; left: 30px; z-index: 2;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--border);
  }
  #screener th:nth-child(2) { background: var(--panel2); z-index: 4; }
  tbody tr:hover td:nth-child(2) { background: var(--panel2); }
  tbody tr.selected td:nth-child(2) { background: var(--row-cell); }

  .detail { padding: 12px; top: 8px; }
  .detail h2 { font-size: 16px; }
  .d-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .d-stats .v { font-size: 14px; }

  .modal-box { width: calc(100vw - 24px); max-width: 420px; padding: 14px; }
  .grid-form { grid-template-columns: 1fr 64px 64px; }
  .grid-form input { width: 64px; }
  .calc input { width: 100px; }
  .calc .row { flex-wrap: wrap; }

  .order-box { padding: 8px; }
  .zone-row { flex-wrap: wrap; }
  #zoneInfo { margin-left: 0; width: 100%; text-align: left; }

  .k .info::after, .calc h3 .info::after, .vd-score .info::after,
  .sig-stats h3 .info::after, .panel-h .info::after, th .info::after {
    width: min(240px, 78vw);
  }

  footer { padding: 10px 12px; }
  button { padding: 8px 12px; } /* крупнее зона касания */
}

@media (max-width: 480px) {
  body { font-size: 13px; }
  h1 { font-size: 15px; }
  .status { gap: 6px; font-size: 11.5px; }
  th, td { padding: 5px 6px; font-size: 11.5px; }
  .d-stats { grid-template-columns: repeat(2, 1fr); }
  .d-stats .v { font-size: 13.5px; }
  .gap-chip { font-size: 11px; padding: 2px 6px; }
  .verdict, .sig-stats, .calc { padding: 10px; }
  .alert-form input { width: 90px; }
}

/* --- Спокойный торговый терминал: скринер --- */
body {
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.hidden, .col-hidden, .control-hidden { display: none !important; }

header {
  min-height: 66px;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h1 { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.sub { font-size: 11px; letter-spacing: 0.02em; }
.status { gap: 12px; font-size: 12px; }
.status a { text-decoration: none; }
.status a:hover { color: var(--text); }

button, input, select { font: inherit; }
button {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button:hover { filter: none; background: var(--accent-hover); }
button.secondary {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
}
button.secondary:hover { background: var(--panel2); border-color: var(--border-hover); color: var(--text); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.icon { min-width: 34px; padding: 6px 9px; }

.viewnav { background: var(--bg); padding-top: 8px; gap: 4px; border-bottom: 1px solid var(--border); }
.viewnav button, .viewnav-page {
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  color: var(--muted);
}
.viewnav button:hover, .viewnav-page:hover { background: var(--panel); color: var(--text); }
.viewnav button.active { background: var(--panel2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

.filters {
  display: block;
  padding: 14px 20px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.filter-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.filter-spacer { flex: 1; }
.search-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 250px;
  height: 36px;
  padding: 0 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
}
.search-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.search-control input[type="text"] { width: 100%; min-width: 0; padding: 0; border: none; background: transparent; }
.search-control input:focus-visible { outline: none; }
.preset-control { display: flex; gap: 4px; }
.preset-control select { max-width: 210px; }

input[type="text"], input[type="number"], select {
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 12.5px;
}
input::placeholder { color: var(--placeholder); }
select { cursor: pointer; }
input:hover, select:hover { border-color: var(--border-hover); }
input:focus, select:focus { outline: none; border-color: var(--accent); }
.turnover-control {
  display: flex;
  align-items: center;
  height: 36px;
  padding-left: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  white-space: nowrap;
  font-size: 12px;
}
.turnover-control input { width: 64px; border: none; background: transparent; padding: 5px 6px; text-align: right; }
.turnover-control input:focus-visible { outline: none; }
.turnover-control span:last-child { padding-right: 9px; }
.button-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
}
.chevron { margin-left: 3px; }
#advancedFiltersBtn[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }
#advancedFiltersBtn[aria-expanded="true"] .chevron { display: inline-block; transform: rotate(180deg); }

.advanced-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(145px, 1fr));
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.filters .advanced-filters label { display: flex; flex-direction: column; align-items: stretch; gap: 6px; color: var(--muted); font-size: 11px; }
.advanced-filters select { width: 100%; }
.range-inputs { display: flex; align-items: center; gap: 5px; }
.range-inputs input { width: 100%; min-width: 0; }
.range-inputs input.narrow { width: 100%; }
.inline-input { display: flex; align-items: center; gap: 6px; }
.inline-input input { width: 100%; }
.text-button { align-self: end; background: transparent; color: var(--muted); border: none; padding: 6px 0; text-align: left; }
.text-button:hover { background: transparent; color: var(--text); }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 5px 4px 9px;
  border: 1px solid var(--accent-border);
  border-radius: 5px;
  background: var(--accent-tint);
  color: var(--accent-chip-text);
  font-size: 11.5px;
}
.filter-chip button { min-width: 20px; min-height: 20px; padding: 0 4px; background: transparent; color: var(--accent-chip-btn); font-size: 10px; }
.filter-chip button:hover { background: var(--accent-soft); color: var(--on-accent); }

.screener-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px 0; }
.quick-filters { display: flex; gap: 3px; padding: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; }
.quick-filters button { min-height: 29px; padding: 4px 11px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; }
.quick-filters button:hover { background: var(--panel2); color: var(--text); }
.quick-filters button.active { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-border); }
.counter { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

main { padding: 12px 20px 18px; gap: 14px; }
.table-wrap {
  min-width: 0;
  max-height: calc(100vh - 230px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  scrollbar-color: var(--scrollbar) var(--panel);
}
#screener { background: var(--panel); border-radius: 0; font-size: 12.5px; }
#screener th, #screener td { padding: 9px 11px; border-bottom: 1px solid var(--border); }
#screener th {
  z-index: 2;
  height: 38px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 var(--border);
}
#screener th:hover { color: var(--text); }
#screener tbody tr { background: var(--panel); }
#screener tbody tr:hover { background: var(--row-hover); }
#screener tbody tr.selected { background: var(--row-selected); box-shadow: inset 2px 0 0 var(--accent); }
#screener tbody tr:last-child td { border-bottom: none; }
#screener .num { font-variant-numeric: tabular-nums; }
.instrument-cell { min-width: 145px; max-width: 190px; }
.instrument-cell .ticker { display: block; color: var(--text); font-size: 13px; font-weight: 650; letter-spacing: 0.02em; }
.instrument-name { display: block; max-width: 170px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; }
.star { display: inline-block; width: 16px; color: var(--placeholder); }
.star.on { color: var(--star); }
.trend-badge { font-size: 11px; font-weight: 550; }
.risk-badge, .vd-badge, .ml-badge, .bo-badge { border-radius: 4px; font-weight: 550; }
.risk-badge { padding: 3px 7px; font-size: 10.5px; }
.vd-badge { padding: 3px 7px; font-size: 10.5px; }
.loading { height: 180px; text-align: center; vertical-align: middle; color: var(--muted); }

.detail {
  position: sticky;
  top: 12px;
  width: 540px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 16px;
  border-radius: 8px;
  background: var(--panel);
  scrollbar-color: var(--scrollbar) var(--panel);
}
.detail h2 { padding-right: 24px; font-size: 17px; letter-spacing: -0.01em; }
.d-stats { gap: 6px; }
.d-stats .stat { border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.d-stats .k { font-size: 10px; }
.d-stats .v { margin-top: 3px; font-size: 14px; }
#chart { border: 1px solid var(--border); }
.calc, .sig-stats { border: 1px solid var(--border); background: var(--bg); }
.verdict, .order-box { background: var(--bg); }

.modal { background: var(--overlay); backdrop-filter: blur(3px); }
.modal-box { border-radius: 10px; box-shadow: 0 24px 70px var(--shadow); }
.columns-modal-box { width: 520px; max-width: calc(100vw - 32px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-head h3 { margin-bottom: 6px; }
.modal-head p { margin: 0; line-height: 1.5; }
.modal-close { flex-shrink: 0; }
.columns-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 18px; }
.column-option { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.column-option:hover { background: var(--panel2); border-color: var(--border); }
.column-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.column-option small { margin-left: auto; color: var(--muted); font-size: 9px; }
.column-option.fixed { color: var(--muted); cursor: default; }

@media (max-width: 1350px) {
  .filter-spacer { display: none; }
  .advanced-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 1100px) {
  main { align-items: stretch; }
  .detail { position: relative; top: 0; width: 100%; max-height: none; }
  .table-wrap { width: 100%; max-height: none; }
}

@media (max-width: 768px) {
  .title { gap: 4px; }
  .status { gap: 8px; }
  .filters { padding: 10px 12px; }
  .filter-main { gap: 7px; }
  .search-control { width: 100%; min-width: 0; }
  .preset-control { flex: 1; }
  .preset-control select { width: 100%; max-width: none; }
  .turnover-control { flex: 1; }
  .filter-main > #direction { flex: 1; }
  .advanced-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 10px; }
  .screener-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; }
  .quick-filters { width: 100%; overflow-x: auto; }
  .quick-filters button { flex-shrink: 0; }
  .counter { width: auto; margin-left: 0; }
  main { padding: 10px 12px; }
  #screener th, #screener td { padding: 7px 8px; font-size: 11.5px; }
  #screener [data-col="star"] { position: sticky; left: 0; z-index: 3; background: var(--panel); }
  #screener th[data-col="star"] { z-index: 5; background: var(--panel2); }
  #screener [data-col="secid"] { position: sticky; left: 32px; z-index: 2; background: var(--panel); box-shadow: 1px 0 0 var(--border); }
  #screener th[data-col="secid"] { z-index: 4; background: var(--panel2); }
  #screener tbody tr:hover [data-col="star"], #screener tbody tr:hover [data-col="secid"] { background: var(--row-hover); }
  #screener tbody tr.selected [data-col="star"], #screener tbody tr.selected [data-col="secid"] { background: var(--row-selected); }
  .instrument-cell { min-width: 120px; }
  .instrument-name { max-width: 120px; }
}

@media (max-width: 480px) {
  .advanced-filters { grid-template-columns: 1fr; }
  .filter-main #exportBtn { display: none; }
  .columns-list { grid-template-columns: 1fr; }
  .columns-modal-box { max-height: calc(100vh - 24px); overflow-y: auto; }
  .quick-filters button { padding: 5px 9px; }
}