/* Общий каркас панели: боковое меню на компьютере, верхнее на телефоне.
   Один файл на все страницы — раньше стили были скопированы в каждую,
   и правка в одной не доезжала до остальных. */

:root{
  /* Светлая палитра с фиолетовым отливом. Тёмная тема убрана намеренно:
     панель смотрят при свете дня, а тёмный фон с оранжевыми цифрами
     читался тяжело и выглядел тревожно там, где тревоги нет.

     Оранжевого нет вовсе. «Плохо» — малиновый: он держит смысл опасности,
     но лежит в той же фиолетовой гамме, что и остальное, и не спорит с
     акцентом. */
  --bg:#F6F5FB; --card:#FFFFFF; --side:#FFFFFF;
  --ink:#1C1830; --ink2:#5C5578; --ink3:#6F678C;   /* подписи под цифрами: 4.8 контраста, читаемо */
  --line:#E7E4F1;
  --good:#177F5E; --good-bg:#E6F4EF;
  --warn:#8A6A0F; --warn-bg:#FAF2DF;
  --bad:#C22B5E;  --bad-bg:#FCE9EF;
  --accent:#6244D4;
  --shadow:0 1px 2px rgba(28,24,48,.05), 0 8px 24px -14px rgba(28,24,48,.28);
  --side-w:248px;
}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}

/* ── каркас ─────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;}
.side{background:var(--side);border-right:1px solid var(--line);
  padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.side .brand{font-weight:800;font-size:1.02rem;line-height:1.3;margin-bottom:4px;}
.side .brand small{display:block;font-weight:400;font-size:.8rem;color:var(--ink3);
  margin-top:3px;}
.side nav{display:flex;flex-direction:column;gap:4px;margin-top:22px;}
.side a,.side button{display:block;width:100%;text-align:left;font:inherit;
  font-size:.94rem;font-weight:600;color:var(--ink2);text-decoration:none;
  background:none;border:0;border-radius:9px;padding:10px 12px;cursor:pointer;}
.side a:hover,.side button:hover{background:var(--bg);color:var(--ink);}
.side a[aria-current="page"]{background:var(--accent);color:#fff;}
.side .spacer{flex:1;min-height:18px;}
.side .foot{color:var(--ink3);font-size:.78rem;line-height:1.5;margin-top:18px;}

/* Контент тянется на всю ширину, но не растягивает строки до нечитаемых:
   предел в 1600 пикселей — примерно столько, сколько глаз проходит без
   потери строки. */
.content{padding:28px 32px 90px;max-width:1600px;width:100%;}

@media(max-width:900px){
  .app{grid-template-columns:1fr;}
  .side{position:static;height:auto;border-right:0;
    border-bottom:1px solid var(--line);padding:16px 18px;}
  .side nav{flex-direction:row;flex-wrap:wrap;margin-top:14px;gap:8px;}
  .side a,.side button{width:auto;border:1px solid var(--line);padding:9px 14px;}
  .side .spacer,.side .foot{display:none;}
  .content{padding:20px 18px 80px;}
}

/* ── общие элементы ─────────────────────────────────────────────────── */
h1{font-size:1.55rem;line-height:1.25;margin:0 0 6px;font-weight:700;}
.lead,.sub{color:var(--ink2);font-size:.95rem;margin:0;}
.stamp{color:var(--ink3);font-size:.82rem;margin-top:8px;}
h2.sec,h3.sec{font-size:1.1rem;margin:32px 0 12px;font-weight:700;}
h2.sec .hint,h3.sec .hint{display:block;font-size:.87rem;color:var(--ink2);
  font-weight:400;margin-top:3px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:var(--shadow);margin-bottom:18px;}

/* Ровно две колонки на компьютере, одна на телефоне.
   Пробовал «сколько влезет» — на широком мониторе выходило четыре, плитки
   сжимались до семидесяти пикселей, и подписи вроде «доводит до результата»
   ломались на три строки. Широкая карточка читается легче, чем плотная. */
.grid,.list2{display:grid;gap:14px;align-items:stretch;margin-bottom:16px;
  grid-template-columns:1fr;}
@media(min-width:900px){
  .grid,.list2{grid-template-columns:repeat(2,1fr);}
}
.grid .item,.list2 .row{margin-bottom:0;}

/* Пара карточек в ряд там, где хватает ширины: два показателя, которые
   читаются вместе. Ниже 760 пикселей складываются друг под друга. */
.two{display:grid;gap:14px;align-items:start;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));}
.two .card{margin-bottom:0;height:100%;}

.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.tools input{flex:1 1 280px;min-width:200px;font:inherit;font-size:.95rem;
  padding:10px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);}
.tools input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.tools select{font:inherit;font-size:.95rem;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;}
.tools .count{color:var(--ink3);font-size:.88rem;}

.more{background:none;border:1px solid var(--line);color:var(--ink2);
  padding:10px 18px;border-radius:9px;font-size:.9rem;cursor:pointer;width:100%;
  font-family:inherit;margin-bottom:16px;}
.more:hover{border-color:var(--accent);color:var(--accent);}

.ok{background:var(--good-bg);color:var(--good);border-radius:9px;
  padding:10px 13px;font-size:.9rem;margin-top:12px;}
.err{background:var(--bad-bg);color:var(--bad);border-radius:9px;
  padding:12px 14px;font-size:.92rem;}
.grid > .ok,.grid > .err,.list2 > .ok,.list2 > .err{grid-column:1/-1;margin-top:0;}
.empty{color:var(--ink2);text-align:center;padding:26px;font-size:.95rem;}
.loading{text-align:center;padding:60px;color:var(--ink2);}