.acl-library {
  --acl-bg: #ffffff;
  --acl-text: #222735;
  --acl-muted: #4f5866;
  --acl-accent: #166680;
  --acl-border: rgba(22, 102, 128, 0.14);
  --acl-shadow: 0 14px 34px rgba(20, 30, 40, 0.10);
  --acl-radius: 8px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  color: var(--acl-text);
}
.acl-library *, .acl-library *::before, .acl-library *::after { box-sizing: border-box; }
.acl-sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.acl-library__header { display:grid; grid-template-columns: 1fr minmax(240px, 360px); gap:24px; align-items:start; margin-bottom:24px; }
.acl-library__title { margin:0 0 8px; color:var(--acl-text); font-size:clamp(30px,3vw,44px); line-height:1.15; font-weight:700; }
.acl-library__description { margin:0; max-width:620px; color:var(--acl-text); font-size:17px; line-height:1.45; }
.acl-library__search { width:100%; min-height:44px; padding:10px 16px; border:1px solid rgba(34,39,53,.18); border-radius:6px; background:#fff; color:var(--acl-text); font-size:16px; box-shadow:0 4px 14px rgba(20,30,40,.06); }
.acl-library__search:focus-visible, .acl-library__filter:focus-visible, .acl-item__button:focus-visible, .acl-modal__close:focus-visible { outline:3px solid rgba(22,102,128,.38); outline-offset:3px; }
.acl-library__filters { display:flex; flex-wrap:wrap; gap:14px 18px; margin:0 0 22px; }
.acl-library__filter { min-height:44px; padding:10px 20px; border:1px solid rgba(34,39,53,.16); border-radius:7px; background:#fff; color:var(--acl-text); cursor:pointer; font-size:15px; font-weight:600; box-shadow:0 4px 14px rgba(20,30,40,.04); }
.acl-library__filter.is-active { background:var(--acl-accent); color:#fff; border-color:var(--acl-accent); }
.acl-library__list { border:1px solid rgba(34,39,53,.12); border-radius:var(--acl-radius); overflow:hidden; background:#fff; box-shadow:var(--acl-shadow); }
.acl-item { display:grid; grid-template-columns: 320px minmax(0,1fr) 170px 170px; gap:28px; align-items:center; padding:14px 18px; border-bottom:1px solid rgba(34,39,53,.10); }
.acl-item:last-child { border-bottom:0; }
.acl-item[hidden], .acl-library__empty[hidden], .acl-modal[hidden] { display:none!important; }
.acl-item__thumbnail { position:relative; height:128px; border-radius:7px; overflow:hidden; background:linear-gradient(135deg, rgba(22,102,128,.12), rgba(47,125,138,.05)); }
.acl-item__thumb, .acl-item__placeholder { width:100%; height:100%; display:block; object-fit:cover; }
.acl-item__placeholder { display:flex; align-items:center; justify-content:center; color:var(--acl-accent); background:linear-gradient(135deg, rgba(22,102,128,.16), rgba(22,102,128,.04)); }
.acl-item__placeholder span { width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; font-size:34px; font-weight:800; box-shadow:0 10px 24px rgba(20,30,40,.12); }
.acl-item__play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; background:rgba(22,102,128,.95); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(0,0,0,.24); }
.acl-item__play svg { width:30px; height:30px; fill:#fff; }
.acl-item__category { margin:0 0 8px; color:var(--acl-accent); font-size:12px; line-height:1.2; font-weight:800; text-transform:uppercase; }
.acl-item__title { margin:0 0 8px; color:var(--acl-text); font-size:18px; line-height:1.25; font-weight:700; }
.acl-item__description { margin:0; color:var(--acl-muted); font-size:15px; line-height:1.45; }
.acl-item__meta { color:var(--acl-muted); font-size:15px; }
.acl-item__button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:42px; min-width:138px; padding:10px 18px; border:1px solid var(--acl-accent); border-radius:6px; background:#fff; color:var(--acl-accent)!important; text-decoration:none!important; cursor:pointer; font-size:12px; font-weight:700; }
.acl-item__button:hover { background:var(--acl-accent); color:#fff!important; }
.acl-item__button svg { width:18px; height:18px; fill:currentColor; }
.acl-library__empty { margin:20px 0 0; color:var(--acl-muted); }
.acl-modal { position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; padding:24px; }
.acl-modal__backdrop { position:absolute; inset:0; background:rgba(10,16,24,.72); }
.acl-modal__dialog { position:relative; width:min(960px,100%); max-height:calc(100vh - 48px); overflow:auto; background:#fff; border-radius:12px; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.acl-modal__header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid rgba(34,39,53,.12); }
.acl-modal__title { margin:0; color:var(--acl-text); font-size:21px; line-height:1.25; font-weight:700; }
.acl-modal__close { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:0; border-radius:50%; background:rgba(22,102,128,.10); color:var(--acl-text); cursor:pointer; font-size:32px; line-height:1; }
.acl-modal__frame-wrap { aspect-ratio:16/9; background:#000; }
.acl-modal__frame-wrap iframe { width:100%; height:100%; border:0; display:block; }
body.acl-modal-open { overflow:hidden; }
@media (max-width: 1100px) { .acl-item { grid-template-columns:220px minmax(0,1fr); } .acl-item__meta, .acl-item__action { grid-column:2; } }
@media (max-width: 767px) { .acl-library__header { grid-template-columns:1fr; } .acl-item { grid-template-columns:1fr; gap:12px; padding:16px; } .acl-item__thumbnail { height:auto; aspect-ratio:16/9; } .acl-item__meta, .acl-item__action { grid-column:auto; } .acl-item__button { width:100%; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; } }