/* ========================================================================== 
   COMMUNITY BUILDS HUB V1.6 HYBRID SSR + HYDRATION (/assets/builds/gallery.css)
   ========================================================================== */

/* Shared Build-surface quality-of-life --------------------------------------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-control, #12151b); }
::-webkit-scrollbar-thumb { background: var(--border, rgba(255,255,255,.11)); border-radius: var(--radius-sm, 2px); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #8b8f99); }

.font-mono {
  font-family: "JetBrains Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

body.x-content-sidebar-active { padding-right: 0px!important; }

#builds-app {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.builds-hub {
  --hub-bg: #08090d;
  --hub-panel: #0d0f14;
  --hub-control: #12151b;
  --hub-control-2: #171a21;
  --hub-border: rgba(255,255,255,.11);
  --hub-border-soft: rgba(255,255,255,.065);
  --hub-text: #f4f4f5;
  --hub-muted: #8b8f99;
  --hub-dim: #707681;
  --hub-sky: #38bdf8;
  --hub-blue: #007dec;
  --hub-emerald: #34d399;
  --hub-amber: #fbbf24;
  --hub-rose: #fb7185;
  --hub-violet: #a78bfa;
  --hub-radius: 3px;

  /* Compact Hub typography scale: metadata can stay small; meaningful UI starts at 10px. */
  --hub-type-meta: 11px;
  --hub-type-ui: 11px;
  --hub-type-body: 13px;
  --hub-type-section: 15px;

  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--hub-bg);
  color: var(--hub-text);
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-sizing: border-box;
  font-family: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  line-height: 1.35;
}

.builds-hub *,
.builds-hub *::before,
.builds-hub *::after {
  box-sizing: border-box;
}

.builds-hub button,
.builds-hub a {
  -webkit-tap-highlight-color: transparent;
}

.builds-hub .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;
}

/* Three-bar application shell ------------------------------------------------ */
.hub-sticky-anchor,
.hub-sticky-spacer {
  width: 100%;
  height: 0;
  pointer-events: none;
}

.hub-sticky-tools {
  position: relative;
  z-index: 90;
  width: 100%;
  background: var(--hub-panel);
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

.hub-sticky-tools.is-docked {
  position: fixed;
  top: var(--hub-sticky-top, 0px);
  left: var(--hub-docked-left, 0px);
  width: var(--hub-docked-width, 100%);
  transform: translateY(var(--hub-docked-shift, 0px));
}

.hub-identity-bar,
.hub-control-bar,
.hub-context-bar {
  width: 100%;
  border-bottom: 1px solid var(--hub-border);
}

/* Identity is deliberately non-sticky. It establishes the Hub, then gets out
   of the way once browsing begins. */
.hub-identity-bar {
  min-height: 68px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #090a0e;
}

.hub-brand-block {
  min-width: 0;
}

.hub-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--hub-sky);
  font-size: var(--hub-type-ui);
  font-weight: 800;
  letter-spacing: .11em;
}

.hub-title-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.hub-title-row h1 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hub-brand-block p {
  margin: 5px 0 0;
  color: var(--hub-dim);
  font-size: var(--hub-type-ui);
  font-weight: 700;
  letter-spacing: .05em;
}

.hub-catalog-metrics {
  flex: 0 0 auto;
  min-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  text-align: right;
}

.hub-catalog-metrics strong {
  display: block;
  color: var(--hub-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .025em;
}

.hub-catalog-metrics strong:last-child {
  color: var(--hub-muted);
}

/* Compact sticky discovery rail: controls + information only. */
.hub-control-bar {
  min-height: 40px;
  margin: 0;
  padding: 5px 8px;
  background: var(--hub-panel);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hub-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  background: var(--hub-control);
  border: 1px solid var(--hub-border);
  border-radius: 2px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hub-search-wrap:focus-within {
  border-color: rgba(56,189,248,.65);
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.08);
}

.hub-search-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hub-muted);
  font-size: 16px;
  line-height: 1;
}

.hub-search {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  min-width: 0;
  height: 28px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 30px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--hub-text) !important;
  font-size: var(--hub-type-body) !important;
  font-weight: 750;
  line-height: 28px !important;
  letter-spacing: .015em;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
}

.hub-search::placeholder {
  color: var(--hub-dim);
  opacity: 1;
  line-height: 28px;
}

.hub-search::-webkit-search-decoration,
.hub-search::-webkit-search-cancel-button,
.hub-search::-webkit-search-results-button,
.hub-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.hub-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hub-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.hub-control-actions {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hub-view-btn,
.hub-filter-trigger,
.hub-share-build {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--hub-border);
  border-radius: 2px;
  background: var(--hub-control);
  color: var(--hub-muted);
  font-size: var(--hub-type-ui);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hub-view-btn,
.hub-filter-trigger {
  cursor: pointer;
}

.hub-view-btn.active {
  background: rgba(56,189,248,.1);
  border-color: rgba(56,189,248,.38);
  color: var(--hub-sky);
}

.hub-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.hub-control-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hub-control-2);
  color: var(--hub-text);
  font-size: var(--hub-type-meta);
}

.hub-share-build {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: rgba(56,189,248,.42);
  background: rgba(56,189,248,.08);
  color: var(--hub-sky) !important;
  text-decoration: none !important;
}

.hub-share-build i {
  font-style: normal;
}

.hub-share-short {
  display: none;
}

.hub-filter-trigger:hover,
.hub-filter-trigger:focus-visible,
.hub-view-btn:hover,
.hub-view-btn:focus-visible {
  border-color: rgba(56,189,248,.5);
  color: var(--hub-sky);
  outline: none;
}

.hub-share-build:hover,
.hub-share-build:focus-visible {
  background: var(--hub-sky);
  border-color: var(--hub-sky);
  color: #061018 !important;
  outline: none;
}

.hub-context-bar {
  min-height: 28px;
  padding: 4px 8px;
  background: #0a0c10;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
}

.hub-result-status {
  flex: 0 0 auto;
  color: var(--hub-muted);
  font-size: var(--hub-type-ui);
  font-weight: 800;
  letter-spacing: .035em;
  white-space: nowrap;
}

.hub-active-filters {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.hub-filter-chip {
  flex: 0 0 auto;
  min-height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(56,189,248,.22);
  border-radius: 2px;
  background: rgba(56,189,248,.05);
  color: var(--hub-muted);
  cursor: pointer;
  font-size: var(--hub-type-meta);
  font-weight: 750;
}

.hub-filter-chip strong {
  color: var(--hub-text);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-filter-chip i {
  color: var(--hub-sky);
  font-style: normal;
  font-size: 11px;
}

/* Session pins -------------------------------------------------------------- */
.hub-pinned-zone {
  margin: 0 0 10px;
  border: 1px solid var(--hub-border);
  border-radius: 3px;
  background: #0a0c11;
  overflow: hidden;
}

.hub-pinned-zone[hidden] {
  display: none !important;
}

.hub-pinned-head {
  min-height: 42px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--hub-border-soft);
  background: #0d1016;
}

.hub-pinned-head > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hub-pinned-head span {
  color: var(--hub-sky);
  font-size: var(--hub-type-ui);
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.hub-pinned-head strong {
  color: var(--hub-muted);
  font-size: var(--hub-type-ui);
  font-weight: 800;
  letter-spacing: .035em;
}

.hub-compare-pins {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(56,189,248,.34);
  border-radius: 2px;
  background: rgba(56,189,248,.07);
  color: var(--hub-sky);
  cursor: pointer;
  font-size: var(--hub-type-ui);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.hub-compare-pins:disabled {
  opacity: .38;
  cursor: default;
}

.hub-compare-pins:not(:disabled):hover,
.hub-compare-pins:not(:disabled):focus-visible {
  border-color: var(--hub-sky);
  background: rgba(56,189,248,.13);
  outline: none;
}

.hub-pinned-grid {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.hub-pinned-card {
  min-width: 0;
  min-height: 64px;
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--hub-border-soft);
  border-radius: 2px;
  background: #10131a;
}

.hub-pinned-image {
  width: 68px;
  aspect-ratio: 1.2 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: #040507;
}

.hub-pinned-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hub-pinned-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hub-pinned-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff !important;
  text-decoration: none !important;
  font-size: var(--hub-type-ui);
  font-weight: 900;
}

.hub-pinned-copy > span,
.hub-pinned-copy > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #737985;
  font-size: var(--hub-type-meta);
  font-weight: 750;
}

.hub-pinned-copy > small {
  color: #9298a3;
}

.hub-pinned-remove {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #666d78;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.hub-pinned-remove:hover,
.hub-pinned-remove:focus-visible {
  color: var(--hub-sky);
  outline: none;
}

.hub-pin-intelligence {
  border-top: 1px solid var(--hub-border-soft);
  background: #080a0e;
}

.hub-pin-intelligence[hidden] {
  display: none !important;
}

.hub-intelligence-head {
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--hub-border-soft);
}

.hub-intelligence-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hub-intelligence-head span {
  color: var(--hub-sky);
  font-size: var(--hub-type-ui);
  font-weight: 900;
  letter-spacing: .07em;
}

.hub-intelligence-head strong {
  color: #fff;
  font-size: var(--hub-type-body);
  font-weight: 900;
}

.hub-intelligence-head small {
  color: var(--hub-dim);
  font-size: var(--hub-type-meta);
  font-weight: 800;
}

.hub-intelligence-signals {
  padding: 7px 10px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  border-bottom: 1px solid var(--hub-border-soft);
  scrollbar-width: thin;
}

.hub-intelligence-signals span {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(56,189,248,.16);
  border-radius: 2px;
  background: rgba(56,189,248,.035);
  color: #9aa1ac;
  font-size: var(--hub-type-ui);
  font-weight: 800;
}

.hub-compare-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.hub-compare-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
}

.hub-compare-table th,
.hub-compare-table td {
  padding: 7px 9px;
  border-right: 1px solid var(--hub-border-soft);
  border-bottom: 1px solid var(--hub-border-soft);
  text-align: left;
  vertical-align: top;
  font-size: var(--hub-type-ui);
  line-height: 1.35;
  overflow-wrap: anywhere;
  background: transparent;
}

.hub-compare-table th:first-child {
  width: 112px;
  color: var(--hub-dim);
  font-size: var(--hub-type-meta);
  font-weight: 900;
  letter-spacing: .05em;
}

.hub-compare-table thead th {
  background: #0d1016;
  color: #9ba1ac;
  font-weight: 900;
}

.hub-compare-table thead a {
  color: #fff !important;
  text-decoration: none !important;
}

.hub-compare-table td {
  color: #aeb3bd;
  font-weight: 750;
}

/* Feed ---------------------------------------------------------------------- */
.hub-feed {
  min-height: 420px;
  padding: 10px;
  background: var(--hub-bg);
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.hub-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--hub-panel);
  border: 1px solid var(--hub-border-soft);
  border-radius: 3px;
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

.hub-card:hover,
.hub-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.34);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}


.hub-card-media-link,
.hub-card-title-link {
  color: inherit !important;
  text-decoration: none !important;
  outline: none;
}

.hub-card-media-link {
  display: block;
}

.hub-card-media-link:focus-visible,
.hub-card-title-link:focus-visible {
  outline: 1px solid var(--hub-sky);
  outline-offset: 2px;
}

.hub-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #030406;
}

.hub-card-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .28s ease, opacity .18s ease;
}

.hub-card:hover .hub-card-image {
  transform: scale(1.025);
}

.hub-card-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(2,3,5,.46), transparent 33%),
    linear-gradient(to top, rgba(3,4,6,.82), transparent 40%);
  pointer-events: none;
}

.hub-card-media-top {
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}

.hub-card-case,
.hub-card-fit,
.hub-card-photo-badge {
  min-height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 2px;
  background: rgba(4,6,9,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--hub-type-meta);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hub-card-case {
  max-width: 67%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.hub-card-fit {
  flex: 0 0 auto;
  white-space: nowrap;
}

.hub-card-fit.fit-standard {
  color: var(--hub-emerald);
  border-color: rgba(52,211,153,.32);
}

.hub-card-fit.fit-issue {
  color: var(--hub-amber);
  border-color: rgba(251,191,36,.34);
}

.hub-card-fit.fit-modified {
  color: var(--hub-violet);
  border-color: rgba(167,139,250,.34);
}

.hub-card-photo-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  color: #d4d4d8;
  font-size: var(--hub-type-meta);
}

.hub-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 11px 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hub-card-heading-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hub-card-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hub-card-title-link {
  min-width: 0;
}

.hub-card-title {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: var(--hub-type-section);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hub-card-context {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7e8591;
  font-size: var(--hub-type-ui);
  font-weight: 850;
  letter-spacing: .035em;
}

.hub-card-pin {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--hub-border);
  border-radius: 2px;
  background: #11141a;
  color: #737986;
  cursor: pointer;
  font-size: var(--hub-type-ui);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.hub-card-pin:hover,
.hub-card-pin:focus-visible {
  border-color: rgba(56,189,248,.42);
  color: var(--hub-sky);
  outline: none;
}

.hub-card-pin.is-pinned {
  border-color: rgba(56,189,248,.46);
  background: rgba(56,189,248,.09);
  color: var(--hub-sky);
}

.hub-card.is-pinned {
  border-color: rgba(56,189,248,.18);
}

.hub-card-stats i {
  color: #414650;
  font-style: normal;
}

.hub-card-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 7px;
  padding: 7px 0;
  border-top: 1px solid var(--hub-border-soft);
  border-bottom: 1px solid var(--hub-border-soft);
}

.hub-card-spec {
  min-width: 0;
  padding: 1px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hub-card-spec > span {
  color: var(--hub-dim);
  font-size: var(--hub-type-meta);
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.15;
}

.hub-card-spec > strong {
  min-width: 0;
  color: #aeb3bd;
  font-size: var(--hub-type-ui);
  font-weight: 750;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-card-evidence {
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(251,191,36,.14);
  border-left: 2px solid rgba(251,191,36,.55);
  border-radius: 2px;
  background: rgba(251,191,36,.035);
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
}

.hub-card-evidence > span {
  flex: 0 0 auto;
  color: var(--hub-amber);
  font-size: var(--hub-type-meta);
  font-weight: 900;
  letter-spacing: .055em;
}

.hub-card-evidence > strong {
  min-width: 0;
  color: #9e8751;
  font-size: var(--hub-type-ui);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-card-footer {
  margin-top: auto;
  padding-top: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--hub-dim);
  font-size: var(--hub-type-meta);
  font-weight: 800;
  letter-spacing: .02em;
}

.hub-card-byline {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-card-stats {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7c828e;
}

.hub-scroll-state {
  min-height: 42px;
  padding: 10px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--hub-dim);
  font-size: var(--hub-type-meta);
  font-weight: 850;
  letter-spacing: .04em;
}

.hub-scroll-state[hidden] {
  display: none !important;
}

.hub-scroll-spinner {
  display: none;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(56,189,248,.25);
  border-top-color: var(--hub-sky);
  border-radius: 50%;
}

.hub-scroll-state.is-loading .hub-scroll-spinner {
  display: inline-block;
  animation: hub-scroll-spin .7s linear infinite;
}

.hub-scroll-state.is-error {
  color: var(--hub-amber);
}

.hub-scroll-retry {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--hub-border);
  border-radius: 2px;
  background: var(--hub-control);
  color: var(--hub-text);
  cursor: pointer;
  font-size: var(--hub-type-ui);
  font-weight: 700;
  letter-spacing: .03em;
}

.hub-scroll-retry:hover,
.hub-scroll-retry:focus-visible {
  border-color: var(--hub-sky);
  color: var(--hub-sky);
  outline: none;
}

.hub-scroll-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

@keyframes hub-scroll-spin {
  to { transform: rotate(360deg); }
}

.hub-empty,
.hub-feed-error {
  min-height: 300px;
  padding: 40px 20px;
  border: 1px dashed var(--hub-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--hub-muted);
}

.hub-empty strong,
.hub-feed-error strong {
  color: var(--hub-sky);
  font-size: var(--hub-type-section);
  font-weight: 900;
}

.hub-empty span,
.hub-feed-error span {
  max-width: 560px;
  font-size: var(--hub-type-ui);
}

.hub-empty button,
.hub-empty a,
.hub-feed-error button {
  margin-top: 7px;
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--hub-border);
  border-radius: 2px;
  background: var(--hub-control);
  color: var(--hub-text);
  cursor: pointer;
  font-size: var(--hub-type-ui);
  font-weight: 700;
}


/* Server pagination / progressive enhancement ------------------------------- */
.hub-pagination {
  width: 100%;
  padding: 14px 0 4px;
  display: flex;
  justify-content: center;
}

.hub-pagination-actions {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hub-pagination a,
.hub-pagination span {
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hub-border);
  border-radius: 2px;
  background: var(--hub-control);
  color: var(--hub-muted);
  font-size: var(--hub-type-ui);
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}

.hub-pagination span {
  color: var(--hub-dim);
  border-color: var(--hub-border-soft);
  background: transparent;
}

.hub-pagination a:hover,
.hub-pagination a:focus-visible {
  border-color: rgba(56,189,248,.42);
  color: var(--hub-sky);
  outline: none;
}

/* Once gallery.js has successfully enhanced the PHP document, infinite scroll
   becomes the primary continuation UI. Without JS these links remain visible. */
#builds-app[data-hub-ready="1"] .hub-pagination {
  display: none;
}

.hub-noscript {
  margin: 12px 0 0;
  padding: 9px 10px;
  border: 1px solid var(--hub-border-soft);
  background: var(--hub-panel);
  color: var(--hub-dim);
  font-size: var(--hub-type-meta);
  font-weight: 800;
  letter-spacing: .035em;
  text-align: center;
}

/* Skeletons ----------------------------------------------------------------- */
.hub-card-skeleton:hover {
  transform: none;
  border-color: var(--hub-border-soft);
  box-shadow: none;
}

.hub-skeleton-media,
.hub-skeleton-body i {
  background: linear-gradient(90deg, #111319 20%, #181b22 50%, #111319 80%);
  background-size: 220% 100%;
  animation: hubSkeleton 1.25s linear infinite;
}

.hub-skeleton-media {
  aspect-ratio: 16 / 10;
}

.hub-skeleton-body {
  padding: 11px;
  display: grid;
  gap: 8px;
}

.hub-skeleton-body i {
  display: block;
  height: 9px;
  border-radius: 2px;
}

.hub-skeleton-body i:nth-child(1) { width: 82%; height: 12px; }
.hub-skeleton-body i:nth-child(2) { width: 65%; }
.hub-skeleton-body i:nth-child(3) { width: 42%; }

@keyframes hubSkeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -120% 0; }
}

/* Filter drawer -------------------------------------------------------------- */
body.builds-filter-open {
  overflow: hidden !important;
}

.hub-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999980;
  background: rgba(2,3,6,.72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.hub-drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hub-filter-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 999990;
  width: min(390px, 92vw);
  display: flex;
  flex-direction: column;
  background: #090b10;
  border-right: 1px solid var(--hub-border);
  box-shadow: 18px 0 50px rgba(0,0,0,.42);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform .2s ease, visibility .2s ease;
}

.hub-filter-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.hub-drawer-head {
  min-height: 62px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hub-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #0b0d12;
}

.hub-drawer-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hub-drawer-head span {
  color: var(--hub-sky);
  font-size: var(--hub-type-ui);
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.hub-drawer-head strong {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.hub-drawer-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--hub-border);
  border-radius: 2px;
  background: var(--hub-control);
  color: var(--hub-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.hub-drawer-close:hover,
.hub-drawer-close:focus-visible {
  border-color: var(--hub-sky);
  color: var(--hub-sky);
  outline: none;
}

.hub-drawer-status {
  min-height: 31px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hub-border-soft);
  color: var(--hub-muted);
  font-size: var(--hub-type-ui);
  font-weight: 800;
  letter-spacing: .03em;
}

.hub-filter-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 18px 14px 10px;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.hub-filter-group {
  border-bottom: 1px solid var(--hub-border-soft);
}

.hub-filter-group summary {
  min-height: 42px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--hub-muted);
  font-size: var(--hub-type-ui);
  font-weight: 900;
  letter-spacing: .04em;
}

.hub-filter-group summary::-webkit-details-marker { display: none; }

.hub-filter-group summary::after {
  content: '＋';
  color: #555b66;
  font-size: 12px;
}

.hub-filter-group[open] summary::after { content: '−'; }

.hub-filter-group summary span {
  flex: 0 0 auto;
}

.hub-filter-group summary strong {
  margin-left: auto;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hub-text);
  font-size: var(--hub-type-ui);
}

.hub-filter-group-body {
  padding: 0 0 10px;
}

.hub-facet-search-wrap {
  display: block;
  margin-bottom: 6px;
}

.hub-facet-search {
  width: 100%;
  height: 30px;
  padding: 0 8px !important;
  border: 1px solid var(--hub-border) !important;
  border-radius: 2px !important;
  background: var(--hub-control) !important;
  color: var(--hub-text) !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: var(--hub-type-ui) !important;
  font-weight: 750;
}

.hub-facet-search:focus {
  border-color: rgba(56,189,248,.55) !important;
}

.hub-filter-options {
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.hub-filter-option {
  width: 100%;
  min-height: 29px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: #101218;
  color: #9297a2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  font-size: var(--hub-type-ui);
  font-weight: 760;
}

.hub-filter-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-filter-option em {
  flex: 0 0 auto;
  color: var(--hub-dim);
  font-style: normal;
  font-size: var(--hub-type-meta);
}

.hub-filter-option:hover,
.hub-filter-option:focus-visible {
  border-color: rgba(56,189,248,.28);
  color: #fff;
  outline: none;
}

.hub-filter-option.active {
  border-color: rgba(56,189,248,.4);
  background: rgba(56,189,248,.09);
  color: var(--hub-sky);
}

.hub-filter-option.active em { color: var(--hub-sky); }

.hub-filter-empty {
  padding: 18px 4px;
  color: var(--hub-muted);
  font-size: var(--hub-type-ui);
  line-height: 1.5;
}

.hub-drawer-footer {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 8px 10px;
  border-top: 1px solid var(--hub-border);
  background: #0b0d12;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 6px;
}

.hub-drawer-reset,
.hub-drawer-apply {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 2px;
  cursor: pointer;
  font-size: var(--hub-type-ui);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hub-drawer-reset {
  border: 1px solid var(--hub-border);
  background: var(--hub-control);
  color: var(--hub-muted);
}

.hub-drawer-apply {
  border: 1px solid var(--hub-sky);
  background: var(--hub-sky);
  color: #061018;
}


.hub-empty[hidden],
.hub-feed-error[hidden] {
  display: none !important;
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1320px) {
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-pinned-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-card-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (max-width: 782px) {
  .hub-identity-bar {
    min-height: 0;
    padding: 11px 10px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
  }

  .hub-catalog-metrics {
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    text-align: left;
  }

  .hub-catalog-metrics strong {
    display: inline-flex;
    align-items: center;
    font-size: var(--hub-type-body);
  }

  .hub-catalog-metrics strong + strong::before {
    content: '·';
    margin-right: 7px;
    color: #4e5560;
  }
}

@media (max-width: 640px) {
  .hub-title-row h1 { font-size: 17px; }
  .hub-brand-block p { display: none; }

  .hub-control-bar {
    min-height: 38px;
    padding: 5px;
    gap: 4px;
    flex-wrap: nowrap;
  }

  .hub-search-wrap {
    flex: 1 1 110px;
    min-width: 84px;
    height: 30px;
  }

  .hub-search-icon { width: 27px; font-size: 15px; }
  .hub-search { height: 28px !important; line-height: 28px !important; font-size: var(--hub-type-body) !important; padding-right: 24px !important; }
  .hub-search::placeholder { line-height: 28px; }
  .hub-search-clear { right: 2px; width: 22px; height: 22px; }

  .hub-control-actions {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    gap: 4px;
  }

  .hub-view-btn,
  .hub-filter-trigger,
  .hub-share-build {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 7px;
    font-size: var(--hub-type-ui);
  }

  .hub-filter-trigger { gap: 4px; }
  .hub-filter-trigger .hub-control-count { min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--hub-type-meta); }
  .hub-share-long { display: none; }
  .hub-share-short { display: inline; }

  .hub-context-bar {
    min-height: 26px;
    padding: 3px 6px;
    gap: 5px;
  }

  .hub-result-status { font-size: var(--hub-type-ui); }
  .hub-filter-chip { min-height: 18px; padding: 0 5px; font-size: var(--hub-type-meta); }

  .hub-feed { padding: 7px; }
  .hub-grid { grid-template-columns: 1fr; gap: 7px; }

  .hub-pinned-zone { margin-bottom: 7px; }
  .hub-pinned-head { min-height: 38px; padding: 5px 7px; }
  .hub-pinned-head > div { gap: 6px; }
  .hub-compare-pins { min-height: 30px; padding: 0 7px; font-size: var(--hub-type-ui); }
  .hub-pinned-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 7px;
    scrollbar-width: thin;
  }
  .hub-pinned-card { flex: 0 0 min(280px, 84vw); }

  .hub-intelligence-head { align-items: flex-start; }
  .hub-intelligence-head small { display: none; }

  .hub-card-media { aspect-ratio: 16 / 9.5; }
  .hub-card-title { font-size: var(--hub-type-section); }
  .hub-card-context { font-size: var(--hub-type-ui); }
  .hub-card-spec > strong { font-size: var(--hub-type-ui); }

  .hub-filter-drawer {
    width: 100vw;
    border-right: 0;
  }

  .hub-filter-content { padding-right: 18px; }
}

@media (max-width: 420px) {
  .hub-control-label { display: none; }
  .hub-filter-trigger::before { content: 'FILTER'; }
  .hub-card-spec-grid { grid-template-columns: 1fr; }
  .hub-card-pin { min-height: 30px; padding: 0 7px; font-size: var(--hub-type-ui); }
}

@media (prefers-reduced-motion: reduce) {
  .builds-hub *,
  .builds-hub *::before,
  .builds-hub *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Child-theme token integration + SVG icon vocabulary. */
/* Native Theme integration for the Community Builds discovery surface. */
body.sff-site-builds { background: var(--labs-bg); }
body.sff-site-builds .builds-hub {
  --hub-bg: var(--labs-bg);
  --hub-panel: var(--labs-surface);
  --hub-control: var(--labs-input-bg);
  --hub-control-2: var(--labs-surface-muted);
  --hub-border: var(--labs-border-strong);
  --hub-border-soft: var(--labs-border);
  --hub-text: var(--labs-heading);
  --hub-muted: var(--labs-muted);
  --hub-dim: var(--labs-dim);
  --hub-sky: var(--labs-link);
  min-height: calc(100dvh - var(--labs-admin-bar-height) - var(--labs-header-total-height));
}
body.sff-site-builds .hub-identity-bar,
body.sff-site-builds .hub-context-bar,
body.sff-site-builds .hub-pinned-zone,
body.sff-site-builds .hub-pinned-head,
body.sff-site-builds .hub-pin-intelligence,
body.sff-site-builds .hub-filter-drawer,
body.sff-site-builds .hub-drawer-head,
body.sff-site-builds .hub-drawer-footer { background: var(--hub-panel); }
body.sff-site-builds .hub-title-row h1,
body.sff-site-builds .hub-card-title,
body.sff-site-builds .hub-drawer-head strong,
body.sff-site-builds .hub-compare-table thead a { color: var(--hub-text) !important; }
body.sff-site-builds .hub-card-context,
body.sff-site-builds .hub-card-footer,
body.sff-site-builds .hub-card-spec > strong,
body.sff-site-builds .hub-compare-table td { color: var(--hub-muted); }
body.sff-site-builds .hub-card-spec > span,
body.sff-site-builds .hub-card-stats i,
body.sff-site-builds .hub-filter-group summary::after,
body.sff-site-builds .hub-filter-option em,
body.sff-site-builds .hub-compare-table th:first-child { color: var(--hub-dim); }
body.sff-site-builds .hub-card-pin,
body.sff-site-builds .hub-filter-option { background: var(--hub-control-2); color: var(--hub-muted); }
body.sff-site-builds .hub-filter-option:hover,
body.sff-site-builds .hub-filter-option:focus-visible { color: var(--hub-text); }
body.sff-site-builds .hub-pinned-image,
body.sff-site-builds .hub-card-media { background: var(--labs-surface-muted); }
body.sff-site-builds .hub-compare-table thead th { background: var(--hub-control-2); color: var(--hub-muted); }
body.sff-site-builds .hub-sticky-tools.is-docked { top: calc(var(--labs-admin-bar-height) + var(--labs-header-total-height)) !important; }
body.sff-site-builds .hub-drawer-backdrop,
body.sff-site-builds .hub-filter-drawer {
  top: calc(var(--labs-admin-bar-height) + var(--labs-header-total-height));
  bottom: 0;
}
body.sff-site-builds .hub-drawer-backdrop { inset: calc(var(--labs-admin-bar-height) + var(--labs-header-total-height)) 0 0; }
html[data-theme="light"] body.sff-site-builds .hub-card:hover,
html[data-theme="light"] body.sff-site-builds .hub-card:focus-within { box-shadow: var(--labs-shadow); }
/* Image-overlay chips deliberately remain dark in both modes for photographic contrast. */
body.sff-site-builds .hub-card-case,
body.sff-site-builds .hub-card-photo-badge { color: #fff; }
@media (max-width: 782px) {
  body.sff-site-builds .hub-feed { padding-inline: 8px; }
}
/* Legacy Hub CSS still contains a handful of literal dark surfaces. Normalise
   those only in light mode; photographic overlays intentionally stay dark. */
html[data-theme="light"] body.sff-site-builds .hub-identity-bar,
html[data-theme="light"] body.sff-site-builds .hub-context-bar,
html[data-theme="light"] body.sff-site-builds .hub-pinned-zone,
html[data-theme="light"] body.sff-site-builds .hub-pinned-head,
html[data-theme="light"] body.sff-site-builds .hub-pin-intelligence,
html[data-theme="light"] body.sff-site-builds .hub-pinned-card,
html[data-theme="light"] body.sff-site-builds .hub-filter-drawer,
html[data-theme="light"] body.sff-site-builds .hub-drawer-head,
html[data-theme="light"] body.sff-site-builds .hub-drawer-footer,
html[data-theme="light"] body.sff-site-builds .hub-card-pin,
html[data-theme="light"] body.sff-site-builds .hub-filter-option {
  background: var(--hub-panel) !important;
}
html[data-theme="light"] body.sff-site-builds .hub-pinned-image,
html[data-theme="light"] body.sff-site-builds .hub-card-media {
  background: var(--labs-surface-muted) !important;
}
html[data-theme="light"] body.sff-site-builds .hub-skeleton-media,
html[data-theme="light"] body.sff-site-builds .hub-skeleton-body i {
  background: linear-gradient(90deg, var(--labs-surface-muted) 20%, var(--labs-control) 50%, var(--labs-surface-muted) 80%);
  background-size: 220% 100%;
}
html[data-theme="light"] body.sff-site-builds .hub-pinned-title,
html[data-theme="light"] body.sff-site-builds .hub-intelligence-head strong,
html[data-theme="light"] body.sff-site-builds .hub-compare-table thead a {
  color: var(--hub-text) !important;
}

body.sff-site-builds .hub-icon { width:15px; height:15px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body.sff-site-builds .hub-search-icon { font-size:0; }
body.sff-site-builds .hub-search-icon .hub-icon { width:16px; height:16px; }
body.sff-site-builds .hub-share-build .hub-icon { width:14px; height:14px; }
body.sff-site-builds .hub-drawer-close .hub-icon,
body.sff-site-builds .hub-search-clear .hub-icon { width:16px; height:16px; }