:root {
  --library-green: #145c32;
  --library-deep: #0e3d1f;
  --library-mint: #b6f0c8;
  --library-pale: #f2f8f3;
  --library-border: #d7e4da;
  --library-ink: #102117;
  --library-muted: #607066;
}

body[data-page="library"] {
  background:
    radial-gradient(circle at 6% 18%, rgba(255,216,107,.17) 0 7px, transparent 8px),
    radial-gradient(circle at 94% 34%, rgba(132,215,245,.15) 0 9px, transparent 10px),
    #fffdf8;
  color: var(--library-ink);
}
body[data-page="library"] .site-header { background: rgba(255,253,248,.96); }
body[data-page="library"] .nav-link.active { color: var(--library-green); font-weight: 700; }
body[data-page="library"] .nav-link.active::after { transform: scaleX(1); }
.library-create-link { text-decoration: none; }
.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; }

.library-discovery {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,216,107,.24) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 68%, rgba(132,215,245,.2) 0 11px, transparent 12px),
    linear-gradient(135deg, #125b31, #1c7541);
  color: #fff;
}
.library-discovery-inner { padding-top: 2.65rem; padding-bottom: 2.35rem; }
.library-intro h1 { margin: 0; font-family: var(--font-heading, "Space Grotesk", sans-serif); font-size: clamp(2.35rem, 5.5vw, 4.3rem); line-height: .98; letter-spacing: -.045em; color: #fff; text-shadow:0 3px 0 rgba(5,42,20,.22); }
.library-intro p { max-width: 34rem; margin: .85rem 0 1.55rem; color: #e5f6ea; font-size: clamp(.98rem, 1.5vw, 1.12rem); line-height: 1.55; }
.library-tools { display: grid; grid-template-columns: minmax(280px, 1.7fr) minmax(170px, .62fr) minmax(160px, .58fr); gap: .75rem; max-width: 64rem; }
.library-search,.library-select { min-height: 3.2rem; display:flex; align-items:center; gap:.7rem; padding: 0 .95rem; border: 2px solid rgba(255,255,255,.78); border-radius: 18px; background:#fff; color:var(--library-deep); box-shadow:0 6px 0 rgba(5,42,20,.2),0 14px 28px rgba(4,35,17,.12); }
.library-search:focus-within,.library-select:focus-within { outline: 3px solid rgba(182,240,200,.46); outline-offset: 2px; }
.library-search svg,.library-select svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.library-search input,.library-select select { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--library-ink); font:600 .92rem/1.2 var(--font-body, "Space Grotesk", sans-serif); }
.library-search input { font-weight:500; }
.library-search input::placeholder { color:#77827b; opacity:1; }
.library-select select { cursor:pointer; }

.library-category-band { border-bottom:1px solid #e4ece6; background:var(--library-pale); }
.category-scroll { display:flex; align-items:center; gap:.25rem; overflow-x:auto; padding-top:.7rem; padding-bottom:.7rem; scrollbar-width:thin; }
.category-button { flex:0 0 auto; border:0; border-radius:999px; padding:.62rem .95rem; background:transparent; color:#32483a; font:650 .82rem/1 var(--font-body, "Space Grotesk", sans-serif); cursor:pointer; transition:background .16s,color .16s,transform .16s; }
.category-button:hover { color:var(--library-green); background:rgba(20,92,50,.07); }
.category-button:active { transform:translateY(1px); }
.category-button.active { background:var(--library-green); color:#fff; box-shadow:0 4px 12px rgba(20,92,50,.18); }
.category-button:focus-visible { outline:3px solid rgba(20,92,50,.22); outline-offset:2px; }

.library-catalog { padding-top:1.1rem; padding-bottom:4rem; }
.catalog-heading { min-height:2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.catalog-heading p { margin:0; }
#catalog-status { font-size:.9rem; font-weight:700; color:var(--library-ink); }
.watermark-note { display:flex; align-items:center; gap:.38rem; color:var(--library-muted); font-size:.77rem; }
.watermark-note svg { width:16px; height:16px; fill:none; stroke:var(--library-green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.library-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; }
.library-card { min-width:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--library-border); border-radius:22px; background:#fff; box-shadow:0 5px 0 rgba(20,92,50,.08),0 14px 30px rgba(13,55,30,.06); transition:transform .18s,border-color .18s,box-shadow .18s; }
.library-card:nth-child(3n+2) { box-shadow:0 5px 0 rgba(255,143,125,.18),0 14px 30px rgba(13,55,30,.06); }
.library-card:nth-child(3n) { box-shadow:0 5px 0 rgba(132,215,245,.22),0 14px 30px rgba(13,55,30,.06); }
.library-card:hover { transform:translateY(-4px) rotate(-.25deg); border-color:#a9c7b0; box-shadow:0 7px 0 rgba(20,92,50,.1),0 18px 32px rgba(13,55,30,.12); }
.library-cover-link { position:relative; display:block; aspect-ratio:3/4; margin:.52rem .52rem 0; overflow:hidden; border-radius:17px; background:linear-gradient(145deg,#fff3b8,#c9f2d5 55%,#bfeaf7); color:var(--library-deep); }
.library-cover { position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; object-fit:cover; transition:transform .28s ease; }
.library-card:hover .library-cover { transform:scale(1.025); }
.library-cover-fallback { position:absolute; inset:0; display:flex; flex-direction:column; gap:.65rem; align-items:center; justify-content:center; font-family:var(--font-heading,"Space Grotesk",sans-serif); font-size:.86rem; font-weight:800; letter-spacing:.02em; color:#155d33; }
.library-cover-fallback svg { width:72px; height:72px; fill:rgba(255,255,255,.6); stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 8px 12px rgba(20,92,50,.12)); }
.library-cover-watermark { position:absolute; left:.65rem; right:.65rem; bottom:.65rem; width:auto; padding:.42rem .55rem; border:1px solid rgba(255,255,255,.38); border-radius:999px; background:rgba(14,61,31,.7); color:#fff; text-align:center; font:700 clamp(.57rem,.85vw,.72rem)/1 "Space Mono",monospace; letter-spacing:.06em; text-shadow:0 1px 2px rgba(0,0,0,.25); pointer-events:none; z-index:2; backdrop-filter:blur(6px); }
.library-cover-link.has-cover .library-cover-watermark { display:none; }
.library-card-body { display:flex; flex:1; flex-direction:column; padding:.66rem .62rem .62rem; }
.library-card h2 { min-height:2.35em; margin:0; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:var(--font-heading,"Space Grotesk",sans-serif); font-size:.9rem; line-height:1.18; letter-spacing:-.012em; color:var(--library-ink); }
.library-author { margin:.28rem 0 .45rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--library-muted); font-size:.75rem; }
.library-meta { display:flex; align-items:center; gap:.42rem; margin-top:auto; color:#4c6254; font-size:.69rem; text-transform:capitalize; }
.library-meta span + span { display:flex; align-items:center; gap:.32rem; }
.library-meta span + span::before { content:""; width:1px; height:10px; margin-right:.08rem; background:#c5d2c8; }
.library-card-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:.4rem; margin-top:.65rem; }
.library-action { min-width:0; min-height:2.2rem; display:inline-flex; align-items:center; justify-content:center; gap:.34rem; border:1px solid #9fc3aa; border-radius:999px; background:#f8fcf9; color:var(--library-deep); text-decoration:none; font:750 .72rem/1 var(--font-body,"Space Grotesk",sans-serif); transition:background .15s,color .15s,border-color .15s,transform .15s; }
.library-action:hover { transform:translateY(-1px); }
.library-action:hover { background:var(--library-green); border-color:var(--library-green); color:#fff; }
.library-action svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

.library-skeleton { min-height:17rem; overflow:hidden; border:1px solid #e2e9e4; border-radius:13px; background:#fff; }
.library-skeleton::before { content:""; display:block; aspect-ratio:4/3; margin:.42rem; border-radius:9px; background:linear-gradient(100deg,#edf3ee 25%,#f8faf8 40%,#edf3ee 60%); background-size:200% 100%; animation:library-shimmer 1.2s infinite linear; }
.library-skeleton::after { content:""; display:block; width:65%; height:4rem; margin:.75rem; border-radius:6px; background:linear-gradient(100deg,#edf3ee 25%,#f8faf8 40%,#edf3ee 60%); background-size:200% 100%; animation:library-shimmer 1.2s infinite linear; }
@keyframes library-shimmer { to { background-position:-200% 0; } }

.library-empty { padding:5rem 1rem; text-align:center; color:var(--library-muted); }
.library-empty svg { width:48px; height:48px; fill:none; stroke:var(--library-green); stroke-width:1.5; }
.library-empty h2 { margin:.8rem 0 .3rem; color:var(--library-ink); font-family:var(--font-heading,"Space Grotesk",sans-serif); }
.library-empty p { margin:0 0 1rem; }
.library-empty button { border:1px solid var(--library-green); border-radius:8px; padding:.65rem 1rem; background:#fff; color:var(--library-green); font-weight:700; cursor:pointer; }

.library-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem; min-height:2.7rem; margin-top:1.35rem; }
.page-button { min-width:2.3rem; height:2.3rem; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; border:1px solid #b9cfbe; border-radius:7px; background:#fff; color:#254731; font:700 .78rem/1 var(--font-body,"Space Grotesk",sans-serif); cursor:pointer; }
.page-button.page-arrow { padding:0 .8rem; }
.page-button:hover:not(:disabled),.page-button.active { border-color:var(--library-green); background:var(--library-green); color:#fff; }
.page-button:disabled { opacity:.43; cursor:not-allowed; }
.page-ellipsis { padding:0 .2rem; color:var(--library-muted); }

.library-footer { border-top:1px solid #e2e9e4; }

@media (max-width: 900px) {
  .library-tools { grid-template-columns:1fr 1fr; }
  .library-search { grid-column:1/-1; }
  .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .library-create-link { display:none; }
}
@media (max-width: 680px) {
  .library-discovery-inner { padding-top:2rem; padding-bottom:1.5rem; }
  .library-tools { grid-template-columns:1fr; }
  .library-search { grid-column:auto; }
  .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  .catalog-heading { align-items:flex-start; flex-direction:column; gap:.35rem; }
  .watermark-note { font-size:.72rem; }
  .library-card h2 { font-size:.82rem; }
  .library-card-actions { grid-template-columns:1fr; }
  .library-action { min-height:2rem; }
  .page-button.page-arrow span { display:none; }
}
@media (max-width: 390px) {
  .library-grid { grid-template-columns:1fr; }
  .library-cover-link { aspect-ratio:3/4; }
  .library-card-actions { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .library-card,.library-cover,.category-button { transition:none; }
  .library-skeleton::before,.library-skeleton::after { animation:none; }
}