/* ============================================================================
   Mashhor Hub — Marketing Library (v575)
   Featured marquee + sidebar + category sections + view/download cards.
   Dark brand theme; RTL-aware via logical properties + JS-set marquee direction.
   Uses brand tokens (--lime,--gold,--cyan,--orange,--muted,--border,--white,--fh,--fm,--far)
   with safe fallbacks so it renders even before the platform CSS loads.
   ============================================================================ */
:root{
  --libx-accent: var(--lime, #c4ff47);
  --libx-accent2: var(--cyan, #36daf5);
  --libx-surf: rgba(255,255,255,.03);
  --libx-surf2: rgba(255,255,255,.05);
  --libx-line: var(--border, rgba(255,255,255,.09));
  --libx-radius: 18px;
}

.libx{ max-width:1240px; margin:0 auto; padding:0 5%; }
.libx *{ box-sizing:border-box; }

/* ── Section heads ─────────────────────────────────────────────── */
.lib-eyebrow{ font-family:var(--fm,'Space Grotesk',monospace); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--libx-accent); margin:0 0 8px; }
.lib-h2{ font-family:var(--fh,'Alexandria',sans-serif); font-size:clamp(1.5rem,3.4vw,2.2rem); margin:0; color:var(--white,#fff); letter-spacing:-.02em; }
.lib-h2 span{ color:var(--libx-accent); }

/* ── FEATURED marquee ──────────────────────────────────────────── */
.lib-feat-wrap{ padding:24px 0 8px; }
.lib-feat-top{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; max-width:1240px; margin:0 auto 20px; padding:0 5%; }
/* direction:ltr so the wide track is LEFT-aligned (overflows to the right) in BOTH languages —
   on RTL pages the container was right-aligned, so the translateX loop scrolled the strip off
   to the left and left the right side blank after a while. The heading (.lib-feat-top) stays RTL. */
.lib-feat-viewport{ overflow:hidden; position:relative; min-height:236px; direction:ltr; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.lib-feat-track{ display:flex; gap:22px; width:max-content; padding:6px 5%; direction:ltr; will-change:transform; }
.lib-feat-track:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .lib-feat-track{ animation:none !important; } }
@keyframes libFeatLeft  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes libFeatRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }

.lib-feat-card{
  flex:0 0 auto; width:min(560px,86vw); display:grid; grid-template-columns:190px 1fr; gap:20px;
  background:linear-gradient(135deg, rgba(196,255,71,.06), rgba(255,255,255,.01));
  border:1px solid var(--libx-line); border-radius:22px; padding:18px; align-items:center;
  transition:transform .4s cubic-bezier(.4,0,.2,1), border-color .4s, box-shadow .4s; text-align:start;
}
.lib-feat-card:hover{ transform:translateY(-4px); border-color:rgba(196,255,71,.35); box-shadow:0 24px 50px rgba(0,0,0,.5); }
.lib-feat-cover{ position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:#0b1220; border:1px solid var(--libx-line); }
.lib-feat-card.tall .lib-feat-cover{ aspect-ratio:3/4; }
.lib-feat-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.lib-feat-cover .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.4rem; opacity:.5; }
.lib-feat-info{ min-width:0; }
.lib-feat-info .rib{ display:inline-block; font-family:var(--fm,monospace); font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#0a0f14; background:var(--gold,#FFB41E); padding:3px 9px; border-radius:100px; margin-bottom:9px; }
.lib-feat-info h3{ font-family:var(--fh,sans-serif); font-size:1.12rem; line-height:1.3; margin:0 0 8px; color:var(--white,#fff); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lib-feat-info p{ font-size:.85rem; line-height:1.55; color:var(--muted,#9aa4b2); margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Mashhor Hub marketing quote ───────────────────────────────── */
.lib-quote{ max-width:1180px; margin:6px auto 8px; padding:0 5%; }
.lib-quote-inner{ position:relative; max-width:900px; margin:0 auto; text-align:center; padding:26px 28px; border:1px solid var(--libx-line); border-radius:18px; background:linear-gradient(135deg, rgba(196,255,71,.05), rgba(255,255,255,.01)); overflow:hidden; }
.lib-quote-mark{ position:absolute; inset-block-start:-12px; inset-inline-start:18px; font-family:Georgia,serif; font-size:5rem; line-height:1; color:var(--libx-accent); opacity:.18; }
.lib-quote-text{ position:relative; font-family:var(--fh,sans-serif); font-size:clamp(1.05rem,2.1vw,1.35rem); line-height:1.6; color:var(--white,#fff); margin:0 0 10px; }
.lib-quote-by{ font-family:var(--fm,monospace); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--libx-accent); }
/* disclosure note under the pagination (fills the gap before the frame edge) */
.lib-note{ display:flex; align-items:flex-start; gap:11px; margin-top:22px; padding:15px 18px; border:1px solid var(--libx-line); border-radius:14px; background:linear-gradient(135deg, rgba(196,255,71,.045), rgba(255,255,255,.012)); }
.lib-note svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; color:var(--libx-accent); opacity:.9; }
.lib-note p{ margin:0; font-size:.82rem; line-height:1.7; color:var(--muted,#9aa4b2); }
@media (max-width:560px){ .lib-note{ padding:13px 14px; gap:9px; } .lib-note p{ font-size:.78rem; } }

/* ── APP shell: sidebar + main (inside a frame) ────────────────── */
.libx{ max-width:1180px; }
.lib-frame{ border:1px solid var(--libx-line); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); padding:26px; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.lib-app{ display:grid; grid-template-columns:250px 1fr; gap:34px; align-items:start; padding:0; min-height:560px; }
.lib-side{ position:sticky; top:90px; display:flex; flex-direction:column; gap:16px; border:1px solid var(--libx-line); background:rgba(255,255,255,.02); border-radius:16px; padding:16px; }
.lib-search{ position:relative; }
.lib-search input{
  width:100%; padding:12px 40px 12px 16px; padding-inline:16px 40px; border-radius:12px;
  background:var(--libx-surf); border:1px solid var(--libx-line); color:var(--white,#fff);
  font-family:inherit; font-size:.9rem; outline:none; transition:border-color .3s;
}
.lib-search input:focus{ border-color:var(--libx-accent); }
.lib-search svg{ position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted,#9aa4b2); pointer-events:none; }

.lib-side-title{ font-family:var(--fm,monospace); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted,#9aa4b2); margin:4px 2px; }
.lib-catlist{ display:flex; flex-direction:column; gap:4px; }
.lib-cat{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:10px 14px; border-radius:11px; background:transparent; border:1px solid transparent;
  color:var(--muted,#9aa4b2); font-family:inherit; font-size:.9rem; cursor:pointer; text-align:start;
  transition:.25s;
}
.lib-cat:hover{ background:var(--libx-surf); color:var(--white,#fff); }
.lib-cat.active{ background:var(--libx-surf2); border-color:var(--libx-line); color:var(--white,#fff); font-weight:600; }
.lib-cat.active .lib-cat-l .ic{ transform:scale(1.12); }
.lib-cat-l{ display:inline-flex; align-items:center; gap:9px; min-width:0; }
.lib-cat-l .ic{ font-size:1rem; line-height:1; flex:0 0 auto; transition:transform .2s; }
.lib-cat > span:last-child{ flex:0 0 auto; }
.lib-cat .n{ font-size:.72rem; font-family:var(--fm,monospace); color:var(--muted,#9aa4b2); background:rgba(255,255,255,.05); padding:1px 8px; border-radius:100px; }
.lib-cat.active .n{ color:var(--libx-accent); background:rgba(196,255,71,.12); }

.lib-langseg{ display:flex; gap:6px; background:var(--libx-surf); border:1px solid var(--libx-line); border-radius:12px; padding:4px; }
.lib-langseg button{ flex:1; padding:7px 8px; border-radius:9px; background:transparent; border:0; color:var(--muted,#9aa4b2); font-family:inherit; font-size:.78rem; cursor:pointer; transition:.25s; }
.lib-langseg button.active{ background:var(--libx-accent); color:#0a0f14; font-weight:700; }

/* mobile toolbar (sidebar collapses into a chip rail) */
.lib-mobilebar{ display:none; }

/* ── MAIN: sections + cards ────────────────────────────────────── */
.lib-main{ min-width:0; }
.lib-count{ font-family:var(--fm,monospace); font-size:.78rem; color:var(--muted,#9aa4b2); margin:0 2px 18px; }
.lib-section{ margin-bottom:38px; }
.lib-section{ scroll-margin-top:90px; }
.lib-section-h{ display:flex; align-items:center; gap:11px; margin:0 0 16px; }
.lib-section-h .sic{ font-size:1.25rem; line-height:1; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background:var(--libx-surf); border:1px solid var(--libx-line); border-radius:11px; flex:0 0 auto; }
.lib-section-h h3{ font-family:var(--fh,sans-serif); font-size:1.2rem; margin:0; color:var(--white,#fff); letter-spacing:-.01em; }
.lib-section-h .bar{ flex:1; height:1px; background:linear-gradient(90deg,var(--libx-line),transparent); }
[dir="rtl"] .lib-section-h .bar{ background:linear-gradient(270deg,var(--libx-line),transparent); }
.lib-section-h .n{ font-size:.7rem; font-family:var(--fm,monospace); color:var(--muted,#9aa4b2); flex:0 0 auto; }

/* current-view header */
.lib-viewhead{ display:flex; align-items:center; gap:12px; margin:0 2px 20px; }
.lib-viewhead .vh-ic{ font-size:1.35rem; line-height:1; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; background:var(--libx-surf); border:1px solid var(--libx-line); border-radius:12px; flex:0 0 auto; }
.lib-viewhead .vh-title{ font-family:var(--fh,sans-serif); font-size:1.3rem; margin:0; color:var(--white,#fff); letter-spacing:-.01em; }
.lib-viewhead .vh-n{ margin-inline-start:auto; font-family:var(--fm,monospace); font-size:.74rem; color:var(--muted,#9aa4b2); background:var(--libx-surf); border:1px solid var(--libx-line); padding:4px 11px; border-radius:100px; flex:0 0 auto; }

/* auto-fit (not auto-fill) so cards stretch to fill the row — no empty gap beside the sidebar */
.lib-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(208px,1fr)); gap:18px; }
.lib-cards .lib-card{ animation:libFade .45s cubic-bezier(.4,0,.2,1) both; }
.lib-cards .lib-card:nth-child(2){ animation-delay:.05s; }
.lib-cards .lib-card:nth-child(3){ animation-delay:.1s; }
.lib-cards .lib-card:nth-child(4){ animation-delay:.15s; }
@keyframes libFade{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .lib-cards .lib-card{ animation:none; } }

/* pagination */
.lib-pagewrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid var(--libx-line); }
.lib-range{ font-family:var(--fm,monospace); font-size:.76rem; color:var(--muted,#9aa4b2); }
.lib-pager{ display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
.lib-pg{ min-width:38px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; background:var(--libx-surf); border:1px solid var(--libx-line); color:var(--muted,#9aa4b2); font-family:var(--fm,monospace); font-size:.85rem; cursor:pointer; transition:.2s; }
.lib-pg:hover:not(:disabled):not(.active){ background:var(--libx-surf2); color:var(--white,#fff); border-color:rgba(196,255,71,.3); }
.lib-pg.active{ background:var(--libx-accent); color:#0a0f14; border-color:var(--libx-accent); font-weight:800; cursor:default; }
.lib-pg.nav{ font-size:1.2rem; }
.lib-pg:disabled{ opacity:.35; cursor:not-allowed; }
.lib-pg-gap{ color:var(--muted,#9aa4b2); padding:0 4px; align-self:flex-end; }
@media (max-width:560px){
  .lib-pagewrap{ justify-content:center; }
  .lib-pager{ margin-inline-start:0; }
  .lib-range{ width:100%; text-align:center; }
}

.lib-card{
  background:var(--libx-surf); border:1px solid var(--libx-line); border-radius:var(--libx-radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.4,0,.2,1), border-color .35s, box-shadow .35s;
}
.lib-card:hover{ transform:translateY(-5px); border-color:rgba(196,255,71,.3); box-shadow:0 22px 44px rgba(0,0,0,.45); }
.lib-card-cover{ position:relative; aspect-ratio:16/10; background:#0b1220; overflow:hidden; }
.lib-card-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.lib-card:hover .lib-card-cover img{ transform:scale(1.05); }
.lib-card-cover .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.2rem; opacity:.45; }
.lib-card-cover .rib{ position:absolute; inset-block-start:10px; inset-inline-start:10px; font-family:var(--fm,monospace); font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--libx-accent); background:rgba(6,12,20,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:4px 9px; border-radius:100px; }
.lib-card-body{ padding:15px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.lib-card-body h4{ font-family:var(--fh,sans-serif); font-size:1rem; line-height:1.35; margin:0; color:var(--white,#fff); }
.lib-card-body p{ font-size:.82rem; line-height:1.55; color:var(--muted,#9aa4b2); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.lib-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.lib-tag{ font-size:.66rem; font-family:var(--far,var(--fm,inherit)); color:var(--muted,#9aa4b2); background:rgba(255,255,255,.05); border:1px solid var(--libx-line); padding:2px 9px; border-radius:100px; white-space:nowrap; }

.lib-meta{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.lib-stat{ display:inline-flex; align-items:center; gap:5px; font-family:var(--fm,monospace); font-size:.72rem; color:var(--muted,#9aa4b2); }
.lib-stat svg{ width:12px; height:12px; }

.lib-author{ display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--muted,#9aa4b2); }
.lib-author svg{ width:13px; height:13px; flex:0 0 auto; opacity:.8; }
.lib-author span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lib-actions{ display:flex; gap:8px; padding:0 16px 12px; }

/* social share row */
.lib-cardfoot{ padding:0 16px 16px; }
/* one line at the bottom: views/downloads on one side, share on the other */
.lib-foot-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--libx-line); padding-top:11px; }
.lib-share{ display:flex; align-items:center; gap:5px; flex-wrap:nowrap; }
.lib-feat-info .lib-share{ margin-top:12px; }
.lib-sh{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:var(--libx-surf); border:1px solid var(--libx-line); color:var(--muted,#9aa4b2); transition:.2s; flex:0 0 auto; min-width:0; box-sizing:border-box; }
.lib-sh svg{ width:12px; height:12px; }
.lib-stat{ gap:4px; }
.lib-sh:hover{ transform:translateY(-2px); color:#fff; }
.lib-sh-x:hover{ background:#000; border-color:#000; }
.lib-sh-whatsapp:hover{ background:#25D366; border-color:#25D366; color:#062; }
.lib-sh-facebook:hover{ background:#1877F2; border-color:#1877F2; }
.lib-sh-linkedin:hover{ background:#0A66C2; border-color:#0A66C2; }
.lib-sh-telegram:hover{ background:#229ED9; border-color:#229ED9; }
.lib-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 12px; border-radius:11px; font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:.25s; white-space:nowrap; }
.lib-btn svg{ width:15px; height:15px; }
.lib-btn-view{ background:var(--libx-accent); color:#0a0f14; }
.lib-btn-view:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.lib-btn-dl{ background:transparent; color:var(--libx-accent2); border-color:rgba(54,218,245,.35); }
.lib-btn-dl:hover{ background:rgba(54,218,245,.1); transform:translateY(-1px); }
.lib-btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; pointer-events:none; }
.lib-btn-fav{ flex:0 0 auto; width:38px; padding:10px; background:transparent; color:var(--muted,#9aa4b2); border-color:rgba(255,255,255,.14); }
.lib-btn-fav:hover{ background:rgba(244,205,85,.1); border-color:rgba(244,205,85,.4); color:var(--gold,#f4cd55); }
.lib-btn-fav.is-active{ color:var(--gold,#f4cd55); border-color:rgba(244,205,85,.4); }

.lib-empty{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:420px; padding:40px 20px; color:var(--muted,#9aa4b2); }
.lib-empty .em{ font-size:2.6rem; display:block; margin-bottom:12px; opacity:.6; }
.lib-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:480px; padding:40px; color:var(--muted,#9aa4b2); }

/* ── Responsive ────────────────────────────────────────────────── */
/* grid/flex children must be allowed to shrink or the sidebar's scroll row
   forces the whole page wider than the viewport (horizontal overflow). */
.lib-app, .lib-side, .lib-main, .lib-frame, .lib-cards, .lib-card{ min-width:0; max-width:100%; }

@media (max-width: 900px){
  .lib-app{ grid-template-columns:1fr; gap:16px; min-height:0; }
  .lib-side{ position:static; top:auto; min-width:0; gap:14px; }
  .lib-side-title{ display:none; }
  .lib-catlist{ flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .lib-catlist::-webkit-scrollbar{ display:none; }
  .lib-cat{ flex:0 0 auto; width:auto; padding:9px 13px; }
  .lib-cat .n{ display:none; }
  .lib-frame{ padding:16px; border-radius:16px; box-shadow:0 14px 34px rgba(0,0,0,.22); }
  .lib-feat-wrap{ padding:18px 0 4px; }
  .lib-feat-card{ grid-template-columns:130px 1fr; width:min(420px,86vw); }
}
@media (max-width: 560px){
  .libx, .lib-quote, .lib-feat-top{ padding-inline:16px; }
  .lib-frame{ padding:12px; border-radius:14px; }
  /* single, full-width, comfortable cards on phones (was cramped 2-col) */
  .lib-cards{ grid-template-columns:1fr; gap:14px; }
  .lib-card-cover{ aspect-ratio:16/9; }
  .lib-card-body{ padding:13px 14px 8px; gap:8px; }
  .lib-card-body h4{ font-size:.98rem; }
  .lib-card-body p{ -webkit-line-clamp:2; font-size:.82rem; }
  .lib-actions{ padding:0 14px 10px; }
  .lib-cardfoot{ padding:0 14px 14px; }
  /* consistent, uniform, touch-friendly social + stat icons on phones */
  .lib-foot-line{ gap:10px; flex-wrap:nowrap; }
  .lib-share{ gap:7px; }
  .lib-sh{ width:30px; height:30px; border-radius:9px; }
  .lib-sh svg{ width:14px; height:14px; }
  .lib-meta{ gap:12px; }
  .lib-stat svg{ width:13px; height:13px; }
  .lib-viewhead .vh-title{ font-size:1.08rem; }
  .lib-viewhead .vh-ic{ width:38px; height:38px; font-size:1.2rem; }
  .lib-quote-inner{ padding:22px 18px; }
  /* featured cards: compact but readable */
  .lib-feat-card{ grid-template-columns:104px 1fr; padding:11px; gap:11px; width:min(320px,86vw); }
  .lib-feat-info h3{ font-size:.98rem; -webkit-line-clamp:2; }
  .lib-feat-info p{ -webkit-line-clamp:2; font-size:.8rem; }
  /* stack the featured foot so the 5 share icons never overflow the narrow card
     and stay perfectly even (spread across the full info width) */
  .lib-feat-info .lib-foot-line{ flex-direction:column; align-items:stretch; gap:9px; }
  .lib-feat-info .lib-foot-line .lib-meta{ justify-content:flex-start; }
  .lib-feat-info .lib-share{ margin-top:0; width:100%; justify-content:space-between; gap:6px; }
  .lib-feat-info .lib-share .lib-sh{ width:30px; height:30px; min-width:0; flex:0 0 30px; padding:0; box-sizing:border-box; overflow:hidden; }
  .lib-pagewrap{ flex-direction:column; align-items:center; gap:12px; }
  .lib-pager{ margin-inline-start:0; }
}

/* ── Discovery collections (best week/month/year, trending, must-read) ─────── */
.lib-collections-wrap, #lib-collections{ display:block; }
.lib-coll{ max-width:1180px; margin:0 auto; padding:6px 5% 4px; }
.lib-coll-h{ display:flex; align-items:center; gap:10px; margin:14px 4px 12px; }
.lib-coll-ic{ display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:9px;
  background:linear-gradient(135deg,var(--libx-accent,#c4ff47),color-mix(in srgb,var(--libx-accent,#c4ff47) 55%,#4aa3ff)); color:#08101a; }
.lib-coll-ic svg{ width:16px; height:16px; }
.lib-coll-h h3{ font-family:var(--fh,sans-serif); font-size:1.12rem; color:var(--white,#fff); margin:0; }
.lib-coll-row{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 14px; scrollbar-width:thin; }
.lib-coll-row::-webkit-scrollbar{ height:7px; } .lib-coll-row::-webkit-scrollbar-thumb{ background:var(--libx-line); border-radius:100px; }
.lib-cc{ flex:0 0 auto; width:184px; scroll-snap-align:start; text-decoration:none; border:1px solid var(--libx-line); border-radius:14px;
  overflow:hidden; background:var(--libx-surf); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.lib-cc:hover{ transform:translateY(-5px); border-color:var(--libx-accent,#c4ff47); box-shadow:0 20px 40px rgba(0,0,0,.45); }
.lib-cc .lib-cc-cover{ position:relative; aspect-ratio:16/10; background:#0b1220; overflow:hidden; }
.lib-cc .lib-cc-cover img{ width:100%; height:100%; object-fit:cover; }
.lib-cc .lib-cc-cover .rib{ position:absolute; inset-block-start:8px; inset-inline-start:8px; font-family:var(--fm,monospace); font-size:.58rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:#0a0f14; background:var(--libx-accent,#c4ff47); padding:2px 7px; border-radius:100px; }
.lib-cc-b{ padding:11px 12px 12px; }
.lib-cc-b h4{ font-family:var(--fh,sans-serif); font-size:.86rem; line-height:1.35; margin:0 0 8px; color:var(--white,#fff);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.lib-cc-meta{ display:flex; gap:12px; font-family:var(--fm,monospace); font-size:.7rem; color:var(--muted,#9aa4b2); }
.lib-cc-meta span{ display:inline-flex; align-items:center; gap:4px; }
.lib-cc-meta svg{ width:12px; height:12px; }

/* Favorite = a heart badge overlaid on the book cover (top-end corner, opposite the
   ribbon). Lives on every card type; the actions row now holds only View + Download. */
.lib-fav-cover{ position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:4; width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; line-height:0;
  background:rgba(6,11,20,.6); border:1px solid rgba(255,255,255,.16); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.lib-fav-cover svg{ width:16px; height:16px; }
.lib-fav-cover:hover{ background:rgba(6,11,20,.82); border-color:var(--gold,#f4cd55); color:var(--gold,#f4cd55); transform:scale(1.1); }
.lib-fav-cover.is-active{ color:var(--gold,#f4cd55); border-color:var(--gold,#f4cd55); }
html[data-color="light"] .lib-fav-cover{ background:rgba(255,255,255,.9); border-color:rgba(0,30,80,.14); color:#1a1a2e; }
/* collection cards: the wrapper carries the flex sizing + is the positioning context */
.lib-cc-wrap{ position:relative; flex:0 0 184px; scroll-snap-align:start; }
.lib-cc-wrap .lib-cc{ width:100%; }
.lib-cc-wrap .lib-fav-cover{ inset-block-start:8px; inset-inline-end:8px; width:30px; height:30px; }
.lib-cc-wrap .lib-fav-cover svg{ width:14px; height:14px; }

/* ── Promo banner (video + copy) → Prompt Marketplace ─────────────────────── */
.lib-promo{ max-width:1180px; margin:22px auto; padding:0 5%; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:0;
  align-items:stretch; }
.lib-promo{ border:1px solid var(--libx-line); border-radius:20px; overflow:hidden; background:linear-gradient(120deg,#0a1524,#0e1c30);
  max-width:1100px; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.lib-promo-media{ position:relative; min-height:280px; background:#0b1220; }
.lib-promo-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lib-promo-ov{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,21,36,0) 40%,#0c1a2d 100%); }
[dir="rtl"] .lib-promo-ov{ background:linear-gradient(270deg,rgba(10,21,36,0) 40%,#0c1a2d 100%); }
.lib-promo-body{ padding:24px 26px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.lib-promo-tag{ display:inline-block; font-family:var(--fm,monospace); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--libx-accent,#c4ff47); background:color-mix(in srgb,var(--libx-accent,#c4ff47) 15%,transparent); border:1px solid color-mix(in srgb,var(--libx-accent,#c4ff47) 45%,transparent);
  padding:5px 12px; border-radius:100px; margin-bottom:12px; }
.lib-promo-body h3{ font-family:var(--fh,sans-serif); font-size:clamp(1.2rem,2.4vw,1.5rem); color:#fff; margin:0 0 9px; line-height:1.25; }
.lib-promo-body p{ color:var(--muted,#9aa4b2); font-size:.92rem; line-height:1.6; margin:0 0 18px; }
.lib-promo-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#08101a; background:var(--libx-accent,#c4ff47);
  padding:12px 24px; border-radius:100px; font-family:var(--fm,monospace); font-size:.9rem; text-decoration:none; transition:gap .2s ease; }
.lib-promo-btn:hover{ gap:13px; }
[dir="rtl"] .lib-promo-btn svg{ transform:scaleX(-1); }
@media (max-width:720px){
  .lib-promo{ grid-template-columns:1fr; }
  .lib-promo-media{ min-height:150px; aspect-ratio:16/9; }
  .lib-promo-ov{ background:linear-gradient(180deg,rgba(10,21,36,0) 30%,#0c1a2d 100%) !important; }
  .lib-promo-body{ padding:22px; }
  .lib-cc{ width:150px; }
}

/* Knowledge-Base badge — professional flair (shimmer sweep + soft glow) */
.kb-badge{ position:relative; overflow:hidden; isolation:isolate; box-shadow:0 0 0 1px rgba(196,255,71,.12); animation:kbGlow 3.6s ease-in-out infinite; }
.kb-badge > span{ position:relative; z-index:2; }
.kb-badge::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);
  transform:translateX(-130%); animation:kbShine 3.6s ease-in-out infinite; }
@keyframes kbShine{ 0%,55%{ transform:translateX(-130%); } 92%,100%{ transform:translateX(130%); } }
@keyframes kbGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(196,255,71,.12), 0 6px 18px rgba(196,255,71,.06); } 50%{ box-shadow:0 0 0 1px rgba(196,255,71,.32), 0 10px 30px rgba(196,255,71,.16); } }
@media (prefers-reduced-motion: reduce){ .kb-badge, .kb-badge::after{ animation:none; } }

/* library hero: full-bleed banner — break out of any container to true viewport width */
.lib-hero-sec{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.lib-hero-sec .lib-hero-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.30; z-index:0; pointer-events:none; }