:root{
  --bg:#0f1115; --card:#151923; --muted:#8b95a7; --txt:#eef2ff;
  --pri:#09d9ba; --pri-2:#08c2a6; --red:#ff5d5d;
  --radius:16px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.5 Inter,system-ui,Roboto,Arial}
a{color:var(--txt);text-decoration:none;opacity:.9} a:hover{opacity:1}
.container{max-width:1200px;margin:24px auto;padding:0 16px}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0c0e13;border-bottom:1px solid #1e2430;position:sticky;top:0;z-index:10}
.topbar__nav a{margin:0 10px}
.logo{width:28px;height:28px;margin-right:8px}
.brand{font-weight:700;letter-spacing:.3px}

.card{background:var(--card);border:1px solid #1e2430;border-radius:var(--radius);padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}

/* Адаптивная сетка для формы фильтров */
.grid-auto{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.btn{background:var(--pri);color:#001b16;padding:10px 14px;border-radius:12px;font-weight:600;display:inline-block}
.btn--ghost{border:1px solid #2a3140;border-radius:12px;padding:8px 12px}

input,select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background:#0f1420;
  color:var(--txt);
  border:1px solid #243049;
  outline:none;
  height:40px;
  line-height:40px;
}

label{display:block;margin:6px 0 6px;color:var(--muted)}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#9aa6c1;text-align:left;padding:0 12px}
.table tbody tr{background:#0f1420}
.table td{padding:10px 12px;border-top:1px solid #1c2332;border-bottom:1px solid #1c2332}
.table tr td:first-child{border-left:1px solid #1c2332;border-radius:12px 0 0 12px}
.table tr td:last-child{border-right:1px solid #1c2332;border-radius:0 12px 12px 0}

.kpi{display:flex;gap:16px;flex-wrap:wrap}
.kpi .pill{background:#0f1420;border:1px solid #1c2332;border-radius:999px;padding:8px 12px;color:#c8d2e3;white-space:nowrap}

/* Контейнер фильтров */
.filters{display:flex;flex-direction:column;gap:12px}

/* Внутри формы фильтров */
.filters form label{display:block;margin-bottom:6px}
.filters form .btn{align-self:end;height:40px;line-height:40px}

/* Футер */
.footer{padding:32px 16px;color:var(--muted);text-align:center;border-top:1px solid #1e2430;margin-top:32px}

/* Чуть более компактно на очень узких экранах */
@media (max-width:480px){
  .grid-auto{grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}
}


/* Горизонтальная сетка фильтров: 8 колонок на десктопе */
.filters-grid{
  display:grid;
  grid-template-columns:repeat(8, minmax(160px, 1fr));
  gap:12px;
  align-items:end; /* выравниваем элементы по нижней линии */
}

/* Ячейка поля (label + input/select) */
.field label{display:block;margin:6px 0 6px;color:var(--muted)}
.field input,.field select{
  width:100%;height:40px;line-height:40px;
  padding:10px 12px;border-radius:12px;
  background:#0f1420;color:var(--txt);border:1px solid #243049;outline:none
}

/* Кнопка такой же высоты */
.filters-grid .btn{height:40px;line-height:40px;}

/* Адаптивные брейкпоинты — постепенно уменьшаем число колонок */
@media (max-width:1400px){ .filters-grid{ grid-template-columns:repeat(6, minmax(160px, 1fr)); } }
@media (max-width:1100px){ .filters-grid{ grid-template-columns:repeat(5, minmax(160px, 1fr)); } }
@media (max-width:900px) { .filters-grid{ grid-template-columns:repeat(4, minmax(160px, 1fr)); } }
@media (max-width:700px) { .filters-grid{ grid-template-columns:repeat(3, minmax(160px, 1fr)); } }
@media (max-width:520px) { .filters-grid{ grid-template-columns:repeat(2, minmax(150px, 1fr)); } }

/* Контейнер фильтров — колонкой: сверху форма, ниже KPI */
.filters{display:flex;flex-direction:column;gap:12px}