/* ============================================================================
   ХАЗИНАИ РАҚАМӢ — страница /library и блок на главной.

   Пара к library-page.js.

   РАЗДЕЛ ОТКРЫТ ВСЕМ. Ни одно правило здесь не прячет содержимое от гостя:
   если что-то видно только маъмуру, это решает разметка, а не стили. Скрыть
   кнопку стилями и оставить её в документе — способ однажды показать её
   тому, кому не следует.

   ЦВЕТ БЕРЁТСЯ У СЕЗОНА, А НЕ ЗАДАЁТСЯ ЗДЕСЬ. На сайте четыре времени года
   (ФАСЛ: баҳор, тобистон, тирамоҳ, зимистон), и палитра меняется вся сразу.
   Пока хазина держала свой зелёный, зимой она была единственным зелёным
   пятном на холодной странице. Поэтому ниже вместо красок стоят имена:

     --s-acc     действие и акцент (кнопка, бахш, наведение)
     --s-deep    та же краска ступенью глубже (метка, выбранный фильтр)
     --s-soft    мягкая сезонная заливка (подложка обложки, наведение)
     --season-border, --season-shadow — линия при наведении и тень
     --f-surface --f-bg --f-rule --f-ink --f-ink-2 --f-mute — постоянные:
                 бумага, фон, линейка и три ступени текста

   ПОЧЕМУ --s-acc, А НЕ --season-primary. Имена --season-* задают ДВА файла,
   и задают по-разному: у fasl.css --season-secondary — тёмная ступень, у
   season-bg.css под тем же именем светлая лаймовая. На странице выигрывает
   ФАСЛ, но стоит его выключить — и белые буквы оказывались на светлом. У
   --s-* хозяин один, поэтому ссылаемся на них.

   У каждого имени стоит запасное значение: со ссылкой ?nofasl=1 темы нет, и
   страница возвращается к прежним зелёным краскам, а не теряет цвет.

   ЧТО ЦВЕТА НЕ МЕНЯЕТ. Белый на заливке и на фотографии — он белый в любой
   сезон. Красный у «Нест кардан» и у ошибки: это значение, а не украшение,
   и зимой ошибка не становится голубой.
========================================================================== */

#eag-library {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 32px 64px;
  color: var(--f-ink, #1C2A1A);
}
@media (max-width: 1023px) { #eag-library { padding: 86px 16px 48px; } }

/* ------------------------------------------------------------- полотно -- */
#eag-library .lib-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 40px 36px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
/* z-index: 0 у СНИМКА — не украшение, а условие того, что затемнение вообще
   видно. Ниже стоит правило «.lib-hero > * { z-index: 2 }» для текста, и оно
   ловило картинку тоже: снимок оказывался выше плёнки и закрывал её целиком.
   Правило выглядело работающим — в отладчике плёнка на месте, — но на экране
   баннер был не затемнён ни на каплю. */
#eag-library .lib-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
/* ЗАТЕМНЯЕМ КАРТИНКУ, А НЕ БУКВЫ.

   Было наоборот: у каждой буквы стояла своя тень, а снимок оставался
   ярким. На светлом кадре это читается как грязь по контуру текста —
   особенно на крупном заголовке.

   Теперь ровная плёнка на весь снимок: буквы остаются чистыми, а фон под
   ними спокойный на всей площади, где бы строка ни оказалась. Плотность
   подобрана так, чтобы кадр был живым — рассвет, горы и дальний план
   видны, но не спорят с текстом. */
/* Затемнение идёт СЛЕВА НАПРАВО, а не ровным слоем по всей картинке.
   Текст лежит слева — там плотно, чтобы буквы читались; справа почти
   прозрачно, и пейзаж остаётся пейзажем. Ровная плёнка гасила снимок
   целиком ради двух строк. */
#eag-library .lib-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(8, 28, 18, .86) 0%,
    rgba(8, 28, 18, .62) 45%,
    rgba(8, 28, 18, .18) 100%);
}
#eag-library .lib-hero > * { position: relative; z-index: 2; }
#eag-library .lib-hero h1 {
  margin: 0; font-size: 38px; font-weight: 800; line-height: 1.15; letter-spacing: -.5px;
  color: #fff;
}
#eag-library .lib-hero p {
  margin: 12px 0 0; max-width: 520px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.92);
}
#eag-library .lib-nums { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
#eag-library .lib-num {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; color: rgba(255,255,255,.85);
}
#eag-library .lib-num b { font-size: 16px; color: #fff; font-weight: 800; }

@media (max-width: 620px) {
  /* На телефоне строка занимает всю ширину, и «справа светло» перестаёт
     работать: конец строки уходил на светлый край. Тот же градиент кладём
     сверху вниз — плотное под текстом, прозрачное под низом снимка. */
  #eag-library .lib-hero::after,
  #eag-library .lib-cta::after {
    background: linear-gradient(180deg,
      rgba(8, 28, 18, .86) 0%,
      rgba(8, 28, 18, .62) 45%,
      rgba(8, 28, 18, .18) 100%);
  }
  #eag-library .lib-hero { padding: 28px 20px; min-height: 0; }
  #eag-library .lib-hero h1 { font-size: 26px; }

}

/* --------------------------------------------------------------- отбор -- */
#eag-library .lib-tools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px;
}
#eag-library .lib-find {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 260px;
  background: var(--f-surface, #fff); border: 1px solid var(--f-rule, #E7E3D6); border-radius: 999px; padding: 0 16px; height: 46px;
}
#eag-library .lib-find:focus-within { border-color: var(--s-acc, #2F7A3D); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-acc, #2F7A3D) 20%, transparent); }
#eag-library .lib-find input {
  flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: 14.5px; color: var(--f-ink, #1C2A1A);
}
#eag-library .lib-find svg { flex: none; color: var(--f-mute, #8B937F); }
#eag-library .lib-find button { border: 0; background: none; color: var(--f-mute, #8B937F); cursor: pointer; font-size: 20px; line-height: 1; }
#eag-library .lib-find button:hover { color: var(--s-acc, #2F7A3D); }

#eag-library .lib-kind { display: flex; gap: 8px; }
#eag-library .lib-kind button,
#eag-library .lib-sections button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--f-surface, #fff); color: var(--f-ink-2, #5C6B57); border: 1px solid var(--f-rule, #E7E3D6); border-radius: 999px; padding: 10px 18px;
  transition: background .15s, color .15s, border-color .15s;
}
#eag-library .lib-kind button:hover,
#eag-library .lib-sections button:hover { border-color: var(--s-acc, #2F7A3D); color: var(--s-acc, #2F7A3D); }
#eag-library .lib-kind button.on,
#eag-library .lib-sections button.on {
  background: var(--s-deep, #1F3D26); border-color: var(--s-deep, #1F3D26); color: #fff;
}
#eag-library .lib-sort select {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--f-ink, #1C2A1A); cursor: pointer;
  background: var(--f-surface, #fff); border: 1px solid var(--f-rule, #E7E3D6); border-radius: 999px; padding: 11px 16px;
}
#eag-library .lib-sort select:focus { outline: none; border-color: var(--s-acc, #2F7A3D); }

#eag-library .lib-sections { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
#eag-library .lib-sections button { padding: 8px 16px; font-size: 13.5px; }

/* --------------------------------------------------------------- сетка -- */
/* Одна колонка: боковые блоки «Фаъолияти ман» и «Ҳисоби шумо» убраны
   вместе с историей, которую они показывали. */
#eag-library .lib-body { display: block; }

#eag-library h2.lib-h {
  margin: 0 0 14px; font-size: 21px; font-weight: 800; color: var(--f-ink, #1C2A1A);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
#eag-library h2.lib-h span { font-size: 13.5px; font-weight: 500; color: var(--f-mute, #8B937F); }

.lib-cards .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
@media (max-width: 620px) { .lib-cards .lib-grid { grid-template-columns: 1fr; } }

/* Ячейка сетки: карточка + ряд кнопок маъмур под ней. Карточка тянется на
   всю высоту ячейки, поэтому в ряду они одинаковы независимо от длины
   названия — а кнопки у всех оказываются на одной линии. */
.lib-cards .lib-cell { display: flex; flex-direction: column; min-width: 0; }
.lib-cards .lib-cell > .lib-card { flex: 1; }

.lib-cards .lib-card {
  display: flex; flex-direction: column; background: var(--f-surface, #fff); border: 1px solid var(--f-rule, #E7E3D6);
  border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.lib-cards .lib-card:hover {
  transform: translateY(-3px); border-color: var(--season-border, #CFE3CB); box-shadow: var(--season-shadow, 0 14px 30px rgba(31,61,38,.12));
}
.lib-cards .lib-face {
  position: relative; aspect-ratio: 16 / 9; background: var(--s-soft, #EEF3EC);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lib-cards .lib-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-cards .lib-face .ph { color: var(--f-mute, #8B937F); }
.lib-cards .lib-tag {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; color: #fff;
}
.lib-cards .lib-tag.pdf { background: var(--s-deep, #1F3D26); }
.lib-cards .lib-tag.video { background: var(--s-acc, #2F7A3D); }
.lib-cards .lib-hidden {
  position: absolute; top: 10px; right: 10px; background: rgba(20,39,24,.8); color: #F7C948;
  border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700;
}
.lib-cards .lib-in { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Раздел и название — РОВНО по строке, длинное отсекаем многоточием.
   Раньше название в две строки делало карточку выше соседних, и ряд шёл
   лесенкой. Многоточие честнее: человек видит, что текст продолжается, а
   полное название ждёт его на самой странице материала. */
.lib-cards .lib-sec {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--s-acc, #2F7A3D);
  text-transform: uppercase; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-cards .lib-t {
  margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Описанию отведены две строки — и когда текста нет, тоже: место занято
   пустотой, зато все карточки ряда одной высоты. */
.lib-cards .lib-d {
  margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--f-ink-2, #5C6B57);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 3em;
}
.lib-cards .lib-foot {
  margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12px; color: var(--f-mute, #8B937F);
}
/* Число просмотров — значком глаза вместо слова: в узкой карточке «13
   дидан» теснит кнопку, а значок понятен на обоих языках. Подпись не
   пропала — она в title и для читалки. */
.lib-cards .lib-meta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lib-cards .lib-views { display: inline-flex; align-items: center; gap: 5px; }
.lib-cards .lib-eye { width: 15px; height: 15px; opacity: .75; }
.lib-cards .lib-go {
  display: inline-flex; align-items: center; gap: 6px; background: var(--s-acc, #2F7A3D); color: #fff;
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.lib-cards .lib-go:hover { background: color-mix(in srgb, var(--s-acc, #2F7A3D) 86%, #000); }

#eag-library .lib-none {
  background: var(--f-surface, #fff); border: 1px solid var(--f-rule, #E7E3D6); border-radius: 16px;
  padding: 46px 20px; text-align: center; color: var(--f-mute, #8B937F); font-size: 15px;
}
#eag-library .lib-none b { display: block; color: var(--f-ink, #1C2A1A); font-size: 17px; margin-bottom: 6px; }

/* ----------------------------------------------------------- призыв ----- */
#eag-library .lib-cta {
  position: relative; margin-top: 30px; border-radius: 22px; overflow: hidden;
  padding: 40px 36px; min-height: 190px; display: flex; flex-direction: column; justify-content: center; color: #fff;
}
#eag-library .lib-cta img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0;                      /* см. пояснение у .lib-hero img */
}
/* Та же мера, что и у верхнего полотна: плёнка на снимок, буквы чистые. */
#eag-library .lib-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(8, 28, 18, .86) 0%,
    rgba(8, 28, 18, .62) 45%,
    rgba(8, 28, 18, .18) 100%);
}
#eag-library .lib-cta > * { position: relative; z-index: 2; }
#eag-library .lib-cta h2 { margin: 0; font-size: 28px; font-weight: 800; color: #fff; }
#eag-library .lib-cta p { margin: 10px 0 18px; font-size: 14.5px; color: rgba(255,255,255,.9); }
#eag-library .lib-cta a {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--s-acc, #2F7A3D); color: #fff; border-radius: 999px; padding: 12px 22px; font-size: 14.5px; font-weight: 800; text-decoration: none;
}
#eag-library .lib-cta a:hover { background: color-mix(in srgb, var(--s-acc, #2F7A3D) 86%, #000); }
@media (max-width: 620px) { #eag-library .lib-cta { padding: 26px 20px; } #eag-library .lib-cta h2 { font-size: 21px; } }

/* --------------------------------------------------------- панель маъмура */
/* Видна только маъмуру, и решает это РАЗМЕТКА: если формы нет в документе,
   её нельзя ни нажать, ни найти в исходном коде страницы. */
#eag-library .lib-admin {
  background: var(--f-surface, #fff); border: 1px solid var(--f-rule, #E7E3D6); border-radius: 16px; padding: 18px 20px; margin: 0 0 22px;
}
#eag-library .lib-admin h3 { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--f-ink, #1C2A1A); }
#eag-library .lib-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (max-width: 720px) { #eag-library .lib-form { grid-template-columns: 1fr; } }
#eag-library .lib-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#eag-library .lib-f.wide { grid-column: 1 / -1; }
#eag-library .lib-f label { font-size: 12.5px; font-weight: 600; color: var(--f-ink-2, #5C6B57); }
#eag-library .lib-f input,
#eag-library .lib-f select,
#eag-library .lib-f textarea {
  font: inherit; font-size: 14px; color: var(--f-ink, #1C2A1A); background: var(--f-bg, #FBFAF5);
  border: 1px solid var(--f-rule, #E7E3D6); border-radius: 10px; padding: 9px 11px; width: 100%; box-sizing: border-box;
}
#eag-library .lib-f textarea { min-height: 64px; resize: vertical; }
#eag-library .lib-f input:focus,
#eag-library .lib-f select:focus,
#eag-library .lib-f textarea:focus { outline: none; border-color: var(--s-acc, #2F7A3D); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-acc, #2F7A3D) 20%, transparent); }
#eag-library .lib-act { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#eag-library .lib-btn {
  font: inherit; font-size: 14px; font-weight: 700; border-radius: 10px; padding: 10px 20px;
  cursor: pointer; border: 1px solid transparent; background: var(--s-acc, #2F7A3D); color: #fff;
}
#eag-library .lib-btn.ghost { background: var(--f-surface, #fff); border-color: var(--f-rule, #E7E3D6); color: var(--f-ink-2, #5C6B57); }
#eag-library .lib-btn[disabled] { opacity: .55; cursor: default; }
#eag-library .lib-msg { font-size: 13px; color: var(--f-mute, #8B937F); }
#eag-library .lib-msg.bad { color: #B0402F; font-weight: 600; }
#eag-library .lib-msg.good { color: var(--s-acc, #2F7A3D); font-weight: 600; }
/* Кнопки управления маводом — квадратные, по размеру значка.

   Прежние были с подписями и занимали всю ширину карточки, оттягивая
   взгляд на себя: маъмур смотрит на материалы, а не на кнопки. Значок
   в квадрате 32 держит тот же ряд втрое короче. Смысл не потерян —
   он в title и aria-label, см. ownButtons. */
#eag-library .lib-own { display: flex; gap: 6px; margin-top: 10px; }
#eag-library .lib-own button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--f-rule, #E7E3D6); background: var(--f-surface, #fff); color: var(--f-mute, #8B937F); border-radius: 9px;
  transition: color .15s, border-color .15s, background .15s;
}
#eag-library .lib-own button:hover { border-color: var(--s-acc, #2F7A3D); color: var(--s-acc, #2F7A3D); background: var(--s-soft, #EEF3EC); }
#eag-library .lib-own button:focus-visible { outline: 2px solid var(--s-acc, #2F7A3D); outline-offset: 1px; }
/* Удаление — единственное необратимое действие в ряду, и цвет при
   наведении это и говорит. До наведения оно такое же спокойное, как
   соседи: красная кнопка в покое кричала бы на пустом месте. */
#eag-library .lib-own button.del:hover { border-color: #B0402F; color: #B0402F; background: #FBF1EF; }

/* ==================================================== блок на главной ====
   Врезка живёт ПЕРЕД секцией курсов (id eag-home-lib), а не в общем низу
   главной. Прежний охват #eag-home-bottom оставлен на случай, если блок
   когда-нибудь вернётся вниз. */
#eag-home-lib .eag-lib,
#eag-home-bottom .eag-lib {
  background: var(--f-surface, #fff); border: 1px solid var(--f-rule, #E7E3D6); border-radius: 20px; padding: 22px 24px; margin-top: 16px;
}
#eag-home-lib .eag-lib-head,
#eag-home-bottom .eag-lib-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
#eag-home-lib .eag-lib h3,
#eag-home-bottom .eag-lib h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--f-ink, #1C2A1A); }
#eag-home-lib .eag-lib-head p,
#eag-home-bottom .eag-lib-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--f-ink-2, #5C6B57); }
#eag-home-lib .eag-lib-all,
#eag-home-bottom .eag-lib-all {
  display: inline-flex; align-items: center; gap: 6px; color: var(--s-acc, #2F7A3D);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
#eag-home-lib .eag-lib-all .ar,
#eag-home-bottom .eag-lib-all .ar { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
#eag-home-lib .eag-lib-all:hover .ar,
#eag-home-bottom .eag-lib-all:hover .ar { transform: translateX(5px); }

/* Врезка стоит внутри полосы главной — даём ей те же поля, что у соседних
   секций, и воздух сверху/снизу. */
/* Ширину и поля по бокам задаёт САМА СТРАНИЦА: врезка стоит в том же
   столбце, что «Курсҳои маъмултарини мо», и своих отступов ей не нужно —
   от них она была уже соседних блоков и висела вразнобой. Сверху и снизу
   воздух свой: блок белый на белом, без него он слипается с соседями. */
#eag-home-lib { margin: 0; padding: 0; }
#eag-home-lib .eag-lib { margin: 36px 0 44px; }