:root{
  --bg:#f6f7fb;
  --paper:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --mint:#10b981;
  --amber:#f59e0b;
  --violet:#7c3aed;
}

body.theme-a0059{background:radial-gradient(900px 500px at 15% 10%, rgba(16,185,129,.18) 0%, transparent 55%),
                 radial-gradient(800px 420px at 85% 20%, rgba(245,158,11,.20) 0%, transparent 55%),
                 radial-gradient(900px 520px at 55% 90%, rgba(124,58,237,.14) 0%, transparent 60%),
                 var(--bg);
  color:var(--ink)
}

.topbar{position:sticky;top:0;z-index:70;background:rgba(246,247,251,.75);backdrop-filter: blur(12px);border-bottom:1px solid rgba(17,24,39,.08)}
#logo a{font-weight:800;color:var(--ink);text-decoration:none}
.tagline{color:var(--muted)}

.color-banner{background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(245,158,11,.18), rgba(124,58,237,.14));border:1px solid rgba(17,24,39,.08)}
.banner-grid{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.banner-badges{display:flex;gap:.5rem;flex-wrap:wrap}

.masonry-toolbar{display:flex;gap:.5rem;flex-wrap:wrap}

.masonry{background:var(--paper);border:1px solid rgba(17,24,39,.10);border-radius:18px;padding:1rem;box-shadow:0 18px 40px rgba(17,24,39,.08)}

/* CSS columns masonry */
.masonry{column-gap:1.25rem}
.masonry[data-cols="2"]{columns:2}
.masonry[data-cols="3"]{columns:3}
.masonry[data-cols="4"]{columns:4}
@media (max-width: 1200px){
  .masonry[data-cols="4"]{columns:3}
}
@media (max-width: 900px){
  .masonry{columns:1 !important}
}

.masonry > *{break-inside:avoid;margin:0 0 1rem}

/* Offcanvas drawer */
.drawer[hidden]{display:none}
.drawer{position:fixed;inset:0;z-index:90}
.drawer-panel{position:absolute;top:0;bottom:0;left:0;width:min(360px, 88vw);background:#fff;border-right:1px solid rgba(17,24,39,.10);box-shadow: 20px 0 60px rgba(17,24,39,.18);padding:1rem;overflow:auto}
.drawer-backdrop{position:absolute;inset:0;background:rgba(17,24,39,.40)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.drawer-title{font-weight:700}
.drawer-meta{margin-top:1rem;padding-top:1rem;border-top:1px dashed rgba(17,24,39,.18)}

#footer{padding:2rem 0;border-top:1px solid rgba(17,24,39,.10);background:rgba(255,255,255,.55)}
#footer .container{max-width:1200px;margin:0 auto;padding:0 1rem}
#footer .social a{margin-right:.5rem;text-decoration:none}