/* Blog listing surface map. Load after listing.css + shared-extra.css and glass-core.css. Body: class="glass". */
>
  /* Blog listing surface map (on top of glass-core.css). Markup = server/blog.ts renderListing, unchanged. */
  body.glass .blog-body { background:
      radial-gradient(34% 18% at 30% 10%, rgba(70,180,205,0.18) 0%, transparent 72%),
      radial-gradient(30% 22% at 86% 40%, rgba(70,180,205,0.13) 0%, transparent 70%),
      radial-gradient(30% 22% at 12% 64%, rgba(70,180,205,0.13) 0%, transparent 70%),
      radial-gradient(30% 22% at 80% 90%, rgba(63,186,115,0.10) 0%, transparent 70%), #fff; }
  body.glass .featured .featured-cover { border: 1px solid var(--g-edge) !important; box-shadow: 0 1px 1px rgba(18,22,36,0.03), 0 10px 24px rgba(18,40,60,0.06), 0 34px 64px -18px rgba(20,70,60,0.24); }
  body.glass .card {
    background: var(--g-frost);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-edge);
    box-shadow: var(--g-hi), var(--g-depth); }
  body.glass .card:hover { background: rgba(255,255,255,0.8); border-color: rgba(63,186,115,0.4); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(18,22,36,0.05), 0 26px 50px -14px rgba(20,90,60,0.26); }
  body.glass .grid-label { border-bottom-color: rgba(18,22,36,0.08); }
  body.glass .page-link { background: rgba(255,255,255,0.56); -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm); border-color: rgba(255,255,255,0.9); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18,22,36,0.05), 0 8px 18px -8px rgba(20,70,60,0.18); }
  body.glass .page-link:hover { background: rgba(255,255,255,0.9); border-color: var(--dark); }
  body.glass .page-link.active { background: var(--g-gloss), linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 20px -6px rgba(47,158,91,0.45); }
  body.glass .cta-section { background:
      radial-gradient(34% 70% at 30% 40%, rgba(63,186,115,0.22) 0%, transparent 70%),
      radial-gradient(36% 74% at 72% 56%, rgba(70,180,205,0.22) 0%, transparent 70%), #F7F9FB; border-top-color: transparent; }
  body.glass .cta-btn { background: var(--g-gloss), linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.10), 0 2px 6px rgba(47,158,91,0.22), 0 12px 30px -6px rgba(47,158,91,0.45); }
  body.glass .cta-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 10px rgba(47,158,91,0.25), 0 20px 44px -8px rgba(47,158,91,0.55); }
  @media (max-width: 640px) {
    body.glass .blog-body { background:
        radial-gradient(420px 500px at 100% 6%, rgba(70,180,205,0.16) 0%, transparent 72%),
        radial-gradient(400px 600px at 0% 40%, rgba(70,180,205,0.12) 0%, transparent 70%),
        radial-gradient(400px 600px at 100% 75%, rgba(70,180,205,0.12) 0%, transparent 70%), #fff; }
    body.glass .cta-section { background:
        radial-gradient(360px 320px at 0% 30%, rgba(63,186,115,0.22) 0%, transparent 70%),
        radial-gradient(380px 360px at 100% 80%, rgba(70,180,205,0.22) 0%, transparent 70%), #F7F9FB; }
    body.glass .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.84); }
  }