/* ═══ Скринер монет ═══
   Общие переменные, шапка, кнопки и подвал — из styles.css. Здесь только
   то, что есть на этой странице. */

.scr-main{padding-block:0 clamp(30px,4vw,50px)}

.scr-head{padding-block:0 clamp(18px,2.2vw,26px);
  background:linear-gradient(180deg,#f7fbf9,var(--card) 70%)}
.scr-main h1{font-size:clamp(28px,3.6vw,42px);line-height:1.15;
  letter-spacing:-.03em;font-weight:800;margin:0 0 12px}
.scr-lede{font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  max-width:70ch;margin:0}
.scr-when{color:var(--ink-faint)}

/* ── Панель отбора ── */
.scr-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-block:clamp(18px,2.2vw,26px) 12px}
.scr-search{position:relative;flex:1 1 260px;min-width:0}
.scr-search svg{position:absolute;inset-inline-start:13px;inset-block-start:50%;
  translate:0 -50%;width:16px;height:16px;color:var(--ink-faint)}
.scr-search input{width:100%;padding:10px 14px 10px 38px;font:inherit;
  font-size:14px;border:1px solid var(--line-2);border-radius:11px;
  background:var(--card);color:var(--ink)}
.scr-search input:focus{outline:0;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-glow)}
.scr-tools select{padding:10px 12px;font:inherit;font-size:14px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--card);
  color:var(--ink);cursor:pointer}
.scr-tools select:focus{outline:0;border-color:var(--green)}
.scr-reset{padding:10px 14px;font:inherit;font-size:14px;font-weight:600;
  border:1px solid var(--line-2);border-radius:11px;background:var(--card);
  color:var(--ink-soft);cursor:pointer}
.scr-reset:hover{border-color:var(--ink);color:var(--ink)}

/* ── Готовые наборы ── */
/* Половина работы скринера — знать, что вообще спросить. Кнопки задают
   вопросы за читателя: он нажимает и видит ответ, а фильтры под ними
   показывают, из чего этот ответ собран. */
.scr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:14px}
.scr-chip{padding:7px 13px;font-size:13px;font-weight:600;border-radius:99px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-soft);
  cursor:pointer;transition:.15s}
.scr-chip:hover{border-color:var(--green);color:var(--green-deep)}
.scr-chip.on{background:var(--green-wash);border-color:var(--green);
  color:var(--green-deep)}

.scr-count{font-size:13px;color:var(--ink-faint);margin:0 0 10px}
.scr-count b{color:var(--ink)}

/* ── Таблица ── */
/* Горизонтальной прокрутки нет. Вместо неё колонки уходят по мере
   сужения экрана — от самых второстепенных к главным. На телефоне
   остаётся то, ради чего страницу и открывают: монета, цена, изменение. */
.scr-scroll{border:1px solid var(--line);border-radius:16px;
  background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden}
.scr-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:auto}
.scr-table thead th{position:sticky;inset-block-start:0;z-index:1;
  background:var(--bg-2);color:var(--ink-soft);font-weight:600;font-size:12.5px;
  text-align:right;white-space:nowrap;padding:11px 12px;cursor:pointer;
  border-block-end:1px solid var(--line);user-select:none}
.scr-table thead th:first-child{text-align:left}
.scr-table thead th:hover{color:var(--ink)}
.scr-table thead th.on{color:var(--green-deep)}
.scr-table thead th .ar{opacity:.5;font-size:10px;margin-inline-start:3px}
.scr-table tbody td{padding:11px 12px;text-align:right;white-space:nowrap;
  border-block-end:1px solid var(--line);font-variant-numeric:tabular-nums}
.scr-table tbody td:first-child{text-align:left}
.scr-table tbody tr:last-child td{border-block-end:0}
.scr-table tbody tr:hover{background:var(--green-wash)}

.scr-coin{display:flex;align-items:center;gap:10px;text-decoration:none}
.scr-tick{font-weight:700;color:var(--ink)}
.scr-name{color:var(--ink-faint);font-size:12.5px}
.scr-num{color:var(--ink-faint);font-size:12px;width:2.4em;flex:none}

.up{color:var(--green);font-weight:600}
.down{color:var(--red);font-weight:600}
.zero{color:var(--ink-faint)}

/* Полоса «где цена в годовом коридоре»: слева годовой минимум, справа
   максимум, точка — сегодня. Одна картинка вместо трёх чисел. */
.scr-bar{display:inline-block;position:relative;width:74px;height:6px;
  border-radius:99px;background:var(--bg-3);vertical-align:middle}
.scr-bar i{position:absolute;inset-block-start:-3px;width:6px;height:12px;
  border-radius:99px;background:var(--green);translate:-50% 0}
.scr-bar.lowp i{background:var(--red)}

.scr-more{display:block;margin:16px auto 0;padding:11px 22px;font:inherit;
  font-size:14px;font-weight:700;border:1px solid var(--line-2);
  border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer}
.scr-more:hover{border-color:var(--green);color:var(--green-deep)}
.scr-empty{padding:40px 20px;text-align:center;color:var(--ink-faint);
  font-size:14px}

.scr-note{max-width:80ch;margin:clamp(20px,2.4vw,28px) 0 0;font-size:12.5px;
  line-height:1.6;color:var(--ink-faint)}

/* ── Переключатель срока ── */
.scr-period{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-block-end:14px}
.scr-period-lbl{font-size:13px;color:var(--ink-faint);margin-inline-end:4px}
.scr-per{padding:6px 12px;font:inherit;font-size:13px;font-weight:600;
  border-radius:9px;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink-soft);cursor:pointer;transition:.15s}
.scr-per:hover{border-color:var(--green);color:var(--green-deep)}
.scr-per.on{background:var(--green);border-color:var(--green);color:#fff}

/* ── Что прячем и когда ── */
@media (max-width:1150px){ .c-vol{display:none} }
@media (max-width:980px){  .c-pos{display:none} }
@media (max-width:820px){  .c-vola{display:none} }
@media (max-width:660px){  .c-cap{display:none} }
@media (max-width:480px){
  .c-ath{display:none}
  .scr-name{display:none}          /* остаётся тикер: имя не влезает */
  .scr-table{font-size:13px}
  .scr-table thead th,.scr-table tbody td{padding:9px 8px}
}

@media (max-width:700px){
  .scr-tools{gap:8px}
  .scr-tools select,.scr-reset{flex:1 1 calc(50% - 4px)}
}