/* site.css :: v2 */
:root{
  --bg:#0b0b0d; --fg:#e8e8ea; --card:#16161a; --line:#2a2a30;
  --muted:#a9a9b3; --link:#93c5fd; --btn:#3b82f6; --btn2:#374151;
  --radius:14px; --radius-sm:10px; --pad:16px; --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.55;
}
a{color:var(--link);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.section{padding:24px 0}

/* Шапка/подвал */
.header, .footer {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.header .logo a{font-weight:800;letter-spacing:.4px}
.header nav{display:flex;gap:10px;flex-wrap:wrap}
.footer{color:var(--muted);font-size:14px;border-top:1px solid var(--line);margin-top:24px;padding-top:16px}

/* Карточки и плитки */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--pad); box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.row{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}

/* Кнопки */
.btn{
  display:inline-block;background:var(--btn);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:10px 14px;font-weight:600;cursor:pointer
}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:var(--btn2)}

/* Типографика */
h1,h2,h3{line-height:1.2;margin:0 0 12px}
h1{font-size:clamp(22px,3.2vw,34px)}
h2{font-size:clamp(18px,2.6vw,26px)}
p{margin:0 0 10px}
.muted{color:var(--muted)}

/* Таблицы (скроллятся на мобиле) */
.table-wrap{overflow-x:auto;border:1px dashed var(--line);border-radius:var(--radius);background:#0f0f12}
table{width:100%;min-width:640px;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}

/* Главная: hero/slider заглушка + сетка карточек */
.hero{margin:10px 0 6px}
.hero .slider{display:grid;gap:12px}
.hero .item{
  border-radius:var(--radius); min-height:180px; display:flex;align-items:flex-end; padding:16px;
  background-size:cover;background-position:center;border:1px solid var(--line)
}
.hero .item h2{margin:0}

/* Сетка карточек каталога/главной */
.grid{display:grid;gap:16px}
@media (min-width: 961px){ .grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 960px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns:1fr} }

/* Формы */
input,select,textarea{
  width:100%;background:#0f0f12;color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px
}
label{display:block;margin:10px 0 6px}

/* Утилиты */
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.hidden{display:none!important}

/* Небольшая полировка встроенных UI-скриптов */
.slider h2{font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* === v2.1 tweaks === */

/* Шапка: на широких — кнопки чуть компактнее и по базовой линии, на узких — уже было */
@media (min-width: 961px){
  .header nav .btn{padding:8px 12px; border-radius:10px}
}

/* Универсальная карточка внутри .grid: вертикальный флекс, ровные отступы */
.grid .card{
  display:flex; flex-direction:column; gap:10px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.grid .card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.30) }

/* Заглушка под превью: если используется <img>, то скруглим; если bg-image — уже скруглено */
.grid .card img{
  border-radius:12px; border:1px solid var(--line);
}

/* Заголовок/мета внутри карточек, если такие элементы есть */
.grid .card h3{ font-size:16px; margin:0 }
.grid .card .meta{ color:var(--muted); font-size:13px }
.grid .card .tags{ display:flex; gap:6px; flex-wrap:wrap }
.grid .card .tag{
  font-size:12px; color:var(--muted); border:1px solid var(--line);
  padding:4px 8px; border-radius:999px; background:#0f0f12
}

/* Кнопки действий внутри карточек */
.grid .card .btn{ align-self:flex-start }

/* Контейнер секций — чуть компактнее на очень больших и ровнее на планшетах */
@media (min-width:1280px){ .container{max-width:1180px} }
@media (max-width:960px){ .section{padding:18px 0} }

/* Таблицы — шрифт заголовков колонок слегка компактнее */
table thead th{ font-size:13px; color:var(--muted); font-weight:600 }

/* Микрополировка hero-слайдера (высота на десктопе) */
@media (min-width:961px){ .hero .item{ min-height:220px } }

/* === v2.2: cards & badges polish === */

/* Бейджи и KPI */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#0f0f12;
  color:var(--muted);
  font-size:12px;
  line-height:1;
}
.kpis{display:flex;gap:8px;flex-wrap:wrap}

/* Карточка каталога/главной (универсально под любой HTML из UI.mountCards) */
.grid .card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .12s ease,box-shadow .12s ease, border-color .12s ease;
}
.grid .card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  border-color:#34343b;
}

/* Превью */
.grid .card .thumb, .grid .card img{
  display:block;
  width:100%;
  border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
}

/* Текстовые блоки внутри карточки */
.grid .card h3{font-size:16px;margin:2px 0 0;font-weight:700}
.grid .card .meta{color:var(--muted);font-size:13px}
.grid .card .desc{color:#cfcfd4;font-size:14px}

/* Теги (если есть) */
.grid .card .tags{display:flex;gap:6px;flex-wrap:wrap}
.grid .card .tag{
  font-size:12px;color:var(--muted);
  border:1px solid var(--line);background:#0f0f12;
  padding:4px 8px;border-radius:999px
}

/* Кнопки действий внизу карточки */
.grid .card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.grid .card .btn{align-self:flex-start}

/* Контейнеры секций компактнее на планшетах */
@media (max-width:960px){ .section{padding:18px 0} }

/* Слайдер — немного крупнее на десктопе, компактнее на мобилке */
@media (min-width:961px){ .hero .item{min-height:240px} }
@media (max-width:480px){
  .header nav{gap:8px}
  .header nav .btn{padding:8px 10px}
}

/* === v2.3: generic grid item polish === */
.grid > a, .grid > div {
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.grid > a:hover, .grid > div:hover {
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  border-color:#34343b;
}
.grid > a img, .grid > div img {
  width:100%; height:auto; display:block;
  border-radius:12px; border:1px solid var(--line);
  margin-bottom:8px;
}
.grid > a h3, .grid > div h3 { font-size:16px; margin:2px 0 0; font-weight:700 }
.grid > a .meta, .grid > div .meta { color:var(--muted); font-size:13px }
.grid > a .desc, .grid > div .desc { color:#cfcfd4; font-size:14px }

/* === v2.3: mobile nav & card fix === */

/* Шапка на мобилках: кнопки компактные, не на всю ширину */
@media (max-width: 680px){
  .header{align-items:center}
  .header nav{display:flex; gap:8px; flex-wrap:wrap}
  .header nav .btn{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:auto !important;
    padding:8px 12px;
    border-radius:10px;
    line-height:1.1;
  }
}

/* Страховки от «чёрных пустот» и вылазов */
.grid > * { min-width: 0 }           /* карточки могут сжиматься */
.card{ max-width:100% }              /* не шире контейнера */
img{ max-width:100%; height:auto }   /* картинки не вылезают */

/* На очень узких — гарантированно один столбец карточек */
@media (max-width: 480px){
  .grid{ grid-template-columns: 1fr !important; }
  .hero .item{ min-height: 140px; padding: 12px }
}

/* === v2.3: mobile nav & card fix === */

/* Шапка на мобилках: кнопки компактные, не на всю ширину */
@media (max-width: 680px){
  .header{align-items:center}
  .header nav{display:flex; gap:8px; flex-wrap:wrap}
  .header nav .btn{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:auto !important;
    padding:8px 12px;
    border-radius:10px;
    line-height:1.1;
  }
}

/* Страховки от «чёрных пустот» и вылазов */
.grid > * { min-width: 0 }           /* карточки могут сжиматься */
.card{ max-width:100% }              /* не шире контейнера */
img{ max-width:100%; height:auto }   /* картинки не вылезают */

/* На очень узких — гарантированно один столбец карточек */
@media (max-width: 480px){
  .grid{ grid-template-columns: 1fr !important; }
  .hero .item{ min-height: 140px; padding: 12px }
}