body {
  font-family: 'Inter', sans-serif;
  background-color: #0b1120;
  color: #fff;
  padding-top: env(safe-area-inset-top);
}

.glass-panel {
  background: rgba(21, 30, 50, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The shared navigation is the only fixed top bar on this page. */
.tree-explorer-results-content { padding-top: 1.5rem; }

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.results-back-link { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1rem; color: #93c5fd; font-size: .78rem; font-weight: 800; text-decoration: none; transition: color 160ms ease; }
.results-back-link:hover, .results-back-link:focus-visible { color: #fff; text-decoration: none; }
.results-back-link .material-symbols-rounded { font-size: 1.05rem; transition: transform 160ms ease; }
.results-back-link:hover .material-symbols-rounded, .results-back-link:focus-visible .material-symbols-rounded { transform: translateX(-2px); }
.results-header { margin-bottom: 1.25rem; }
.results-header h1 { margin: 0; color: #fff; font-size: 1.4rem; font-weight: 800; }
.results-header p { margin: .25rem 0 0; color: #94a3b8; font-size: .8rem; }

/* ── Collection hero (styled to match view-public-entry) ──────────────────── */
.collection-hero { margin-bottom: 1rem; border-radius: 1rem; }
.collection-hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: clamp(170px, 24vw, 220px);
  overflow: hidden;
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--collection-color, #3b82f6) 24%, transparent), transparent 55%),
    linear-gradient(to top, #0b1120 8%, #131d33 100%);
}
/* Full-bleed cover photo (shown only when the catalog item has one). */
.collection-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.collection-hero__img[hidden] { display: none; }

/* Soft colored glow anchored to the top-left, tinted by the collection color. */
.collection-hero__glow {
  position: absolute;
  top: -35%;
  right: -10%;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--collection-color, #3b82f6) 40%, transparent), transparent 70%);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

/* Darkening gradient over the cover photo so the kicker/title stay legible.
   Only active in the .has-photo state. */
.collection-hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
  background: linear-gradient(to top, rgba(3, 8, 18, .94) 0%, rgba(3, 8, 18, .55) 42%, rgba(3, 8, 18, .18) 100%);
}
.collection-hero.has-photo .collection-hero__shade { display: block; }
/* With a photo, drop the flat tinted background + colored glow in favor of the image. */
.collection-hero.has-photo .collection-hero__media { background: #06111f; }
.collection-hero.has-photo .collection-hero__glow { display: none; }
/* Keep the badge and title above the photo + shade. */
.collection-hero.has-photo .collection-hero__badge,
.collection-hero.has-photo .collection-hero__title { z-index: 2; }
.collection-hero__badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(48px, 12vw, 60px);
  height: clamp(48px, 12vw, 60px);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--collection-color, #3b82f6) 22%, #0b1120);
  border: 1px solid color-mix(in srgb, var(--collection-color, #3b82f6) 55%, transparent);
  box-shadow: 0 12px 30px rgba(2, 6, 23, .45);
}
.collection-hero__badge .material-symbols-rounded {
  color: var(--collection-color, #93c5fd);
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}
.collection-hero__title { position: relative; z-index: 1; }
.collection-hero__title h1 { margin: 0; color: #fff; font-size: clamp(1.5rem, 4.5vw, 2.35rem); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }

/* ── About This Collection card ───────────────────────────────────────────── */
.collection-about {
  margin: 0 0 1.25rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.collection-about__block + .collection-about__block { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.collection-about__header { display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; }
.collection-about__header .material-symbols-rounded { color: var(--collection-color, #93c5fd); font-size: 1.15rem; }
.collection-about__header h2 { margin: 0; color: #e5edf7; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.collection-about__desc { margin: 0; color: #c4d0e2; font-size: .9rem; line-height: 1.6; }

.collection-about__label { margin: 0 0 .6rem; color: #94a3b8; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.collection-about__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.collection-about__tag {
  display: inline-flex;
  align-items: center;
  padding: .4rem .75rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--collection-color, #93c5fd) 72%, #fff);
  background: color-mix(in srgb, var(--collection-color, #3b82f6) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--collection-color, #3b82f6) 45%, transparent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
}

/* ── Grid header ("Trees in this Collection") ─────────────────────────────── */
.collection-grid-head { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; }
.collection-grid-head .material-symbols-rounded { color: var(--collection-color, #93c5fd); font-size: 1.15rem; }
.collection-grid-head h2 { margin: 0; color: #e5edf7; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.collection-grid-head__count { margin-left: auto; padding: .25rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #cbd5e1; font-size: .72rem; font-weight: 800; }
/* Match view-species' underlined tabs and square photo gallery. */
.collection-load-status { display: flex; align-items: center; gap: .8rem; padding: 1rem 0; color: #94a3b8; font-size: .9rem; }
.collection-load-status[hidden], .collection-map-loading[hidden] { display: none; }
.collection-grid-head.hidden { display: none; }
.collection-spinner { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid #334155; border-top-color: #60a5fa; border-radius: 50%; animation: collection-spin .8s linear infinite; }
.collection-load-status.is-error .collection-spinner { display: none; }
.collection-load-status button, .collection-map-loading button { padding: .55rem .9rem; border: 1px solid #475569; border-radius: 8px; color: #dbeafe; background: #1e293b; cursor: pointer; }
.collection-map-shell { position: relative; }
.collection-map-loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border-radius: 16px; background: #101b2c; color: #cbd5e1; }
#resultsGrid[aria-busy="true"] > .animate-pulse, .collection-image-loading, .collection-gallery-card__image.is-loading { background: linear-gradient(100deg, #152033 25%, #24334b 45%, #152033 65%); background-size: 250% 100%; animation: collection-shimmer 1.8s ease-in-out infinite; }
.collection-gallery-card__image.is-loading img, .collection-image-loading img { opacity: 0; }
@keyframes collection-spin { to { transform: rotate(360deg); } }
@keyframes collection-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .collection-spinner, #resultsGrid[aria-busy="true"] > .animate-pulse, .collection-image-loading, .collection-gallery-card__image.is-loading { animation: none; } }
.collection-tabs[hidden], .collection-tab-panel[hidden], #collectionOverview[hidden],
.collection-gallery-empty[hidden] { display: none; }
.collection-tabs { display: flex; gap: 1.35rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 2rem; border-bottom: 1px solid rgba(148, 163, 184, .2); }
.collection-tabs [role="tab"] { min-height: 48px; padding: 0 .1rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: #94a3b8; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 800; }
.collection-tabs [role="tab"]:hover, .collection-tabs [aria-selected="true"] { color: #fff; border-bottom-color: #3b82f6; }
.collection-tabs [role="tab"]:focus-visible, .collection-gallery-card:focus-visible { outline: 2px solid #93c5fd; outline-offset: 5px; }
.collection-tab-panel { --collection-panel-width: min(1600px, calc(100vw - clamp(48px, 12vw, 240px))); width: var(--collection-panel-width); margin-left: calc((100% - var(--collection-panel-width)) / 2); }
#collectionPhotosPanel { --collection-panel-width: min(1280px, calc(100vw - clamp(48px, 12vw, 240px))); }
.collection-map-note { margin: 0 0 1rem; color: #94a3b8; font-size: .85rem; line-height: 1.6; }
.collection-map-frame { display: block; width: 100%; height: max(680px, 85vh); border: 1px solid rgba(148, 163, 184, .2); border-radius: 16px; background: #0b1120; }
.collection-gallery-header { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(148, 163, 184, .2); }
.collection-gallery-header h2 { margin: 0 0 1rem; color: #fff; font-size: clamp(1.55rem, 2vw, 2.15rem); font-weight: 900; line-height: 1.08; }
.collection-gallery-header p { margin: 1rem 0 0; color: #c4d0e2; line-height: 1.78; }
.collection-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.collection-gallery-card { display: block; min-width: 0; overflow: hidden; border: 1px solid rgba(148, 163, 184, .2); border-radius: 14px; background: rgba(255,255,255,.035); color: inherit; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.collection-gallery-card:hover { border-color: rgba(59,130,246,.62); transform: translateY(-2px); }
.collection-gallery-card__image { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: #071426; color: #94a3b8; }
.collection-gallery-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.collection-gallery-card:hover img { transform: scale(1.045); }
.collection-gallery-card__meta { padding: .85rem; }
.collection-gallery-card__meta h3 { margin: 0; overflow: hidden; color: #fff; font-size: .95rem; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.collection-gallery-card__meta p { margin: .35rem 0 0; overflow: hidden; color: #94a3b8; font-size: .78rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.collection-gallery-empty { display: grid; justify-items: center; gap: .75rem; padding: 4rem 1rem; color: #94a3b8; text-align: center; }
.collection-gallery-empty .material-symbols-rounded { color: rgba(147,197,253,.55); font-size: 3rem; }
@media (max-width: 1023px) { .collection-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .collection-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-map-frame { height: max(600px, 80vh); }
}
@media (max-width: 480px) { .collection-gallery-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .collection-gallery-card, .collection-gallery-card img { transition: none; } }