/* Gallery v2 (2026-10-15): compact header with search, one sticky filter bar with a colour ribbon, masonry cards that
   keep each picture's proportions and glow in the work's own colour. The work window keeps its layout and logic;
   only its colours and buttons follow the site. Loaded after community-gallery.css; everything is scoped to the page. */
body.page-community{
  --gx-ink:#f4f9ff;--gx-muted:rgba(206,222,245,.68);--gx-line:rgba(139,233,255,.14);--gx-line-hi:rgba(111,227,255,.5);
  --gx-cyan:#1fc9f1;--gx-cyan-hi:#6fe3ff;--gx-violet:#8a7dff;--gx-panel:linear-gradient(160deg,rgba(16,30,66,.86),rgba(5,10,28,.94));
  --gx-head:72px;background:#03070a;
}
body.page-community .community{width:min(1880px,calc(100% - 2 * var(--site-gutter,40px)));padding:30px 0 90px}

/* ---------------------------------------------------------------- header */
body.page-community .gx-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 32px;padding:18px 0 22px;border:0}
body.page-community .gx-kicker{display:inline-flex;align-items:center;gap:10px;font:800 11.5px/1 Montserrat,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gx-cyan-hi)}
body.page-community .gx-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--gx-cyan);box-shadow:0 0 10px var(--gx-cyan)}
body.page-community .gx-hero h1{margin:14px 0 10px;max-width:none;font:900 clamp(32px,3.3vw,54px)/1 Montserrat,sans-serif;letter-spacing:-.01em;
  text-transform:uppercase;background:linear-gradient(92deg,#fff 0%,#dff6ff 45%,var(--gx-cyan-hi) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.page-community .gx-hero p{margin:0;max-width:46em;font:500 15px/1.55 Montserrat,sans-serif;color:var(--gx-muted)}
body.page-community .gx-hero__side{display:flex;align-items:center;gap:18px}
body.page-community .gx-total{display:flex;align-items:baseline;gap:8px;padding-right:18px;border-right:1px solid var(--gx-line)}
body.page-community .gx-total b{font:900 34px/1 Montserrat,sans-serif;color:#fff;border:0;padding:0;text-shadow:0 0 24px rgba(31,201,241,.35)}
body.page-community .gx-total small{font:700 12px/1 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--gx-muted)}
body.page-community .gx-publish{min-height:48px!important;padding:0 22px!important;border:0!important;border-radius:12px!important;
  background:linear-gradient(135deg,var(--gx-cyan),var(--gx-violet))!important;color:#031019!important;font:800 14px/1 Montserrat,sans-serif!important;
  box-shadow:0 0 28px rgba(125,140,255,.32)!important;transition:filter .2s,box-shadow .2s}
body.page-community .gx-publish:hover{filter:brightness(1.08);box-shadow:0 0 40px rgba(125,140,255,.5)!important}
/* Search: quiet glass that lets the page show through; a hairline border that only warms up on hover and focus.
   The id selectors beat the site-wide input rules (site-theme.css / ui-polish.css give every input its own border). */
body.page-community .gx-search{grid-column:1/-1;position:relative;display:flex;align-items:center;height:56px;padding:0 12px 0 52px;border-radius:16px;
  border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.18);transition:border-color .25s,background .25s,box-shadow .25s}
body.page-community .gx-search:hover{border-color:rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025))}
body.page-community .gx-search:focus-within{border-color:rgba(111,227,255,.3);background:linear-gradient(180deg,rgba(111,227,255,.07),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 0 3px rgba(31,201,241,.07),0 12px 34px rgba(0,0,0,.22)}
body.page-community .gx-search svg{position:absolute;left:19px;width:20px;height:20px;fill:none;stroke:rgba(206,222,245,.5);stroke-width:2;stroke-linecap:round;transition:stroke .25s}
body.page-community .gx-search:focus-within svg{stroke:var(--gx-cyan-hi)}
body.page-community .gx-search #gallerySearch{flex:1;min-width:0;height:100%;margin:0;padding:0!important;border:0!important;outline:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;color:#fff;font:500 15.5px/1 Montserrat,sans-serif;letter-spacing:.005em}
body.page-community .gx-search #gallerySearch::placeholder{color:rgba(206,222,245,.38)}
body.page-community .gx-search #gallerySearch::-webkit-search-cancel-button{display:none}
body.page-community .gx-search #searchClear{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0!important;border-radius:50%!important;
  background:rgba(255,255,255,.07)!important;box-shadow:none!important;color:rgba(255,255,255,.8);font:400 19px/1 Montserrat,sans-serif;cursor:pointer;transition:background .2s,color .2s}
body.page-community .gx-search #searchClear[hidden]{display:none}
body.page-community .gx-search #searchClear:hover{background:rgba(255,255,255,.14)!important;color:#fff}

/* ---------------------------------------------------------------- filter bar */
body.page-community .gx-bar{position:sticky;top:var(--gx-head);z-index:40;display:grid;gap:10px;margin:0 0 22px;padding:10px;border-radius:18px;
  border:1px solid var(--gx-line);background:rgba(6,12,30,.86);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 44px rgba(0,0,0,.35)}
body.page-community .gx-bar__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
body.page-community .gx-seg{display:flex;gap:3px;padding:3px;border-radius:13px;background:rgba(0,0,0,.32);border:1px solid rgba(139,233,255,.08);overflow-x:auto;scrollbar-width:none}
body.page-community .gx-seg::-webkit-scrollbar{display:none}
body.page-community .gx-seg button{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:38px;padding:0 15px;border:0!important;border-radius:10px!important;
  background:transparent!important;box-shadow:none!important;color:var(--gx-muted)!important;font:700 13.5px/1 Montserrat,sans-serif!important;white-space:nowrap;transition:color .18s,background .18s}
body.page-community .gx-seg button:hover{color:#fff!important;background:rgba(139,233,255,.07)!important}
body.page-community .gx-seg button.is-active{color:#031019!important;background:linear-gradient(135deg,var(--gx-cyan-hi),var(--gx-cyan))!important;box-shadow:0 0 20px rgba(31,201,241,.3)!important}
body.page-community .gx-slot{display:inline-grid;flex:none;width:24px;height:12px}
body.page-community .gx-slot svg{width:100%;height:100%;fill:currentColor;opacity:.9}
body.page-community .gx-bar__end{display:flex;align-items:center;gap:12px;flex:none;margin-left:6px}
body.page-community .gx-sort{position:relative;display:flex;align-items:center;gap:10px;margin:0}
body.page-community .gx-sort>span{margin:0;font:700 12px/1 Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--gx-muted)}
/* The select stays in the DOM as the source of truth; community-gallery.js draws the button and the menu. */
body.page-community .gx-sort .gx-sort__native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;
  border:0!important;opacity:0;pointer-events:none;clip-path:inset(50%)}
body.page-community .gx-sort__btn{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 11px 0 12px;border:1px solid rgba(139,233,255,.08)!important;
  border-radius:13px!important;background:rgba(0,0,0,.32)!important;box-shadow:none!important;color:#fff!important;font:700 13.5px/1 Montserrat,sans-serif!important;
  white-space:nowrap;cursor:pointer;transition:background .18s,border-color .18s}
body.page-community .gx-sort__btn:hover,body.page-community .gx-sort.is-open .gx-sort__btn{background:rgba(139,233,255,.07)!important;border-color:rgba(139,233,255,.16)!important}
body.page-community .gx-sort__btn:focus-visible,body.page-community .gx-sort__opt:focus-visible{outline:2px solid rgba(111,227,255,.55)!important;outline-offset:2px}
/* community-gallery.css gives every .community-sort span a 12 px size and an 8 px bottom margin (the old label):
   reset it inside the button and the menu so the text sits in the middle. */
body.page-community .gx-sort .gx-sort__btn span,body.page-community .gx-sort .gx-sort__opt span{display:block;margin:0;font:inherit;line-height:1.15;color:inherit}
body.page-community .gx-sort__ico{flex:none;width:16px;height:16px;fill:none;stroke:var(--gx-cyan-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.page-community .gx-sort__chev{flex:none;width:15px;height:15px;fill:none;stroke:var(--gx-muted);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
body.page-community .gx-sort.is-open .gx-sort__chev{transform:rotate(180deg)}
body.page-community .gx-sort__menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;display:grid;gap:2px;min-width:100%;width:max-content;padding:6px;
  border-radius:15px;border:1px solid rgba(139,233,255,.13);background:linear-gradient(160deg,rgba(16,30,66,.97),rgba(5,10,28,.98));
  box-shadow:0 22px 50px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.05);animation:gx-sort-in .16s ease-out}
body.page-community .gx-sort__menu[hidden]{display:none}
body.page-community .gx-sort__menu::before{content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gx-cyan),var(--gx-violet),transparent);opacity:.7}
body.page-community .gx-sort__opt{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:0!important;border-radius:10px!important;
  background:transparent!important;box-shadow:none!important;color:var(--gx-muted)!important;font:600 13.5px/1 Montserrat,sans-serif!important;text-align:left;
  white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
body.page-community .gx-sort__opt span{flex:1}
body.page-community .gx-sort__opt .gx-sort__ico{stroke:rgba(206,222,245,.5)}
body.page-community .gx-sort__opt:hover,body.page-community .gx-sort__opt:focus-visible{background:rgba(139,233,255,.08)!important;color:#fff!important}
body.page-community .gx-sort__opt[aria-selected="true"]{color:#fff!important;background:rgba(31,201,241,.1)!important}
body.page-community .gx-sort__opt[aria-selected="true"] .gx-sort__ico{stroke:var(--gx-cyan-hi)}
body.page-community .gx-sort__tick{flex:none;width:15px;height:15px;fill:none;stroke:var(--gx-cyan-hi);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
body.page-community .gx-sort__opt[aria-selected="true"] .gx-sort__tick{opacity:1}
@keyframes gx-sort-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body.page-community .gx-reset{border:0;background:none;color:var(--gx-cyan-hi);font:700 13px/1 Montserrat,sans-serif;padding:8px 4px;cursor:pointer}
body.page-community .gx-reset:hover{color:#fff}

/* Colour filter: small circles in spectrum order; the chosen one gets a white ring and its name beside the row. */
body.page-community .gx-colors{display:flex;align-items:center;gap:14px;padding:2px 4px}
body.page-community .gx-colors__label{flex:none;font:700 12px/1 Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--gx-muted)}
body.page-community .gx-palette{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
body.page-community .gx-dot{position:relative;width:22px;height:22px;min-width:0;min-height:0;padding:0;border:0!important;border-radius:50%!important;
  background:var(--sw)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.35)!important;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .25s}
body.page-community .gx-dot:hover{transform:scale(1.18)}
body.page-community .gx-dot[data-color=black]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 2px 6px rgba(0,0,0,.35)!important}
body.page-community .gx-palette:has(.is-active) .gx-dot:not(.is-active){opacity:.5}
body.page-community .gx-palette:has(.is-active) .gx-dot:not(.is-active):hover{opacity:1}
body.page-community .gx-dot.is-active{transform:scale(1.12);box-shadow:0 0 0 2px #050a1c,0 0 0 4px #fff,0 0 16px var(--sw)!important}
body.page-community .gx-colors__chosen{font:700 13px/1 Montserrat,sans-serif;color:#fff}

/* ---------------------------------------------------------------- results */
body.page-community .gx-results__head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;padding:0;border:0}
body.page-community .gx-results__head h2{margin:0;font:800 18px/1.2 Montserrat,sans-serif;color:#fff;letter-spacing:0;text-transform:none}
body.page-community .gx-results__head span{font:600 13px/1 Montserrat,sans-serif;color:var(--gx-muted)}
body.page-community .gx-grid{position:relative;display:block!important;min-height:120px}

/* ---------------------------------------------------------------- card */
body.page-community .gx-card{--accent:#1fc9f1;position:absolute;left:0;top:0;display:flex!important;flex-direction:column;padding:0!important;border-radius:18px!important;
  border:1px solid rgba(255,255,255,.12)!important;background:rgba(14,24,52,.32)!important;overflow:hidden;text-align:left;isolation:isolate;
  box-shadow:0 16px 36px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.14)!important;
  transform:none!important;opacity:0;translate:0 18px;
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--d,0ms),translate 1s cubic-bezier(.16,1,.3,1) var(--d,0ms),border-color .3s,box-shadow .3s}
body.page-community .gx-card.is-in{opacity:1;translate:0 0}
body.page-community .gx-card:hover,body.page-community .gx-card:focus-visible{border-color:color-mix(in srgb,var(--accent) 70%,#fff 10%)!important;outline:none;
  box-shadow:0 22px 46px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 46px color-mix(in srgb,var(--accent) 38%,transparent)!important}
/* Frosted glass: the work itself, blurred and dimmed, sits behind a translucent card (no backdrop-filter per card:
   a hundred of them made scrolling heavy). */
body.page-community .gx-card::before{content:"";position:absolute;inset:-30px;z-index:-1;background:var(--glass) center/cover no-repeat;
  filter:blur(26px) saturate(1.5) brightness(.55);transform:scale(1.1);opacity:.9;pointer-events:none}
body.page-community .gx-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 40%,rgba(8,14,34,.35))}
body.page-community .gx-card__media{position:relative;display:block;aspect-ratio:4/5;margin:8px 8px 0;border-radius:12px;background:rgba(5,10,24,.5);overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
body.page-community .gx-card__media::before{display:none!important}
body.page-community .gx-card__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent));opacity:.85}
body.page-community .gx-card__media img,body.page-community .gx-card__media video{position:absolute!important;inset:0;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;transform:scale(1.001)!important;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .3s!important}
body.page-community .gx-card:hover .gx-card__media>img:first-child{transform:scale(1.06)!important}
body.page-community .gx-card__live{z-index:1;opacity:0}
body.page-community .gx-card__live.is-on{opacity:1}
body.page-community .gx-card__type,body.page-community .gx-card__anim,body.page-community .gx-card__paid{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;
  height:26px;padding:0 10px;border-radius:999px;font:800 11px/1 Montserrat,sans-serif;letter-spacing:.02em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.page-community .gx-card__type{left:10px;top:10px;color:#e9f6ff;background:rgba(4,10,26,.62);border:1px solid rgba(139,233,255,.24)}
body.page-community .gx-card__type .gx-slot{width:20px;height:10px;color:var(--gx-cyan-hi)}
body.page-community .gx-card__anim{right:10px;top:10px;color:#04111c;background:linear-gradient(135deg,var(--gx-cyan-hi),var(--gx-violet))}
body.page-community .gx-card__paid{right:10px;bottom:12px;color:#ffd88a;background:rgba(4,10,26,.7);border:1px solid rgba(255,216,138,.45)}
body.page-community .gx-card.is-adult .gx-card__media>img{filter:blur(18px) brightness(.6)}
body.page-community .gx-card__body{display:grid!important;gap:9px!important;padding:13px 15px 15px!important;background:none!important}
body.page-community .gx-card__body strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:800 15.5px/1.3 Montserrat,sans-serif!important;color:#fff!important;white-space:normal!important;text-overflow:clip!important;text-shadow:0 1px 8px rgba(0,0,0,.4)}
body.page-community .gx-card__meta{display:flex;align-items:center;gap:8px;min-width:0}
body.page-community .gx-card__meta .community-card__author{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 12.5px/1.2 Montserrat,sans-serif!important;color:rgba(230,240,255,.75)!important}
body.page-community .gx-card__dots{display:flex;gap:4px;flex:none}
body.page-community .gx-card__dots i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
body.page-community .gx-card__stats{display:flex;align-items:center;gap:4px;flex:none;font:700 12px/1 Montserrat,sans-serif!important;color:var(--gx-muted)!important}
body.page-community .gx-card__stats b{margin-right:6px}
body.page-community .gx-card__stats b:last-child{margin-right:0}

/* ---------------------------------------------------------------- loading, empty, more */
body.page-community .gx-loading{display:none;margin:0;padding:0;border:0;background:none}
body.page-community .gx-loading:not([hidden]){display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
body.page-community .gx-loading:not(.is-first){margin-top:22px}
body.page-community .gx-loading:not(.is-first) .gx-skel:nth-child(n+5){display:none}
body.page-community .gx-skel{display:block;height:380px;border-radius:18px;border:1px solid var(--gx-line);
  background:linear-gradient(100deg,rgba(16,30,66,.6) 30%,rgba(60,100,170,.28) 50%,rgba(16,30,66,.6) 70%) 0 0/300% 100%;animation:gx-shine 1.4s linear infinite}
body.page-community .gx-skel:nth-child(2n){height:260px}
body.page-community .gx-skel:nth-child(3n){height:360px}
@keyframes gx-shine{from{background-position:100% 0}to{background-position:-100% 0}}
body.page-community .gx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.page-community .community-empty{margin:30px auto;padding:42px 20px;max-width:560px;text-align:center;border:1px dashed var(--gx-line-hi);border-radius:20px;background:rgba(6,12,30,.6)}
body.page-community .community-empty b{display:block;font:800 20px/1.3 Montserrat,sans-serif;color:#fff}
body.page-community .community-empty p{margin:8px 0 0;font:500 14px/1.5 Montserrat,sans-serif;color:var(--gx-muted)}
body.page-community .community-more{display:flex;margin:28px auto 0;min-height:46px;padding:0 26px;border-radius:999px;border:1px solid var(--gx-line-hi);
  background:rgba(31,201,241,.08);color:#fff;font:700 14px/1 Montserrat,sans-serif;align-items:center}
body.page-community .community-more:hover{background:rgba(31,201,241,.16)}

/* ---------------------------------------------------------------- the work window: colours and buttons only */
body.page-community #workOverlay{--accent:#1fc9f1;background:rgba(2,5,14,.72)}
body.page-community .community-detail{border-color:rgba(111,227,255,.2)!important;background:linear-gradient(160deg,#0e1a3c,#050a1c)!important;position:relative}
body.page-community .community-detail::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,var(--gx-cyan),var(--gx-violet),transparent 85%)}
body.page-community .community-detail__top{color:rgba(206,222,245,.55)!important;border-color:rgba(139,233,255,.1)!important}
body.page-community .community-detail__preview{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 0 60px color-mix(in srgb,var(--accent) 22%,transparent)}
body.page-community #detailType{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
body.page-community .gx-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;border:1px solid rgba(139,233,255,.22);
  background:rgba(3,8,24,.5);color:#e9f6ff;font:800 11.5px/1 Montserrat,sans-serif;letter-spacing:.02em;text-transform:none}
body.page-community .gx-chip .gx-slot{width:22px;height:11px;color:var(--gx-cyan-hi)}
body.page-community .gx-chip--anim{border:0;color:#04111c;background:linear-gradient(135deg,var(--gx-cyan-hi),var(--gx-violet))}
body.page-community .gx-chip--dot{width:28px;padding:0;background:var(--sw);border-color:rgba(255,255,255,.3)}
body.page-community .community-detail__info h2{font:800 clamp(22px,1.9vw,30px)/1.15 Montserrat,sans-serif!important;margin:14px 0 8px!important}
body.page-community #detailDescription{color:var(--gx-muted)}
body.page-community .community-detail__metrics{display:flex!important;gap:18px!important;padding:0!important;border:0!important;background:none!important;margin:14px 0}
body.page-community .community-detail__metrics span{display:flex!important;align-items:baseline;gap:7px;padding:0!important;border:0!important}
body.page-community .community-detail__metrics b{font:800 18px/1 Montserrat,sans-serif!important;color:#fff}
body.page-community .community-detail__metrics small{margin:0!important;font:600 12.5px/1 Montserrat,sans-serif!important;letter-spacing:0!important;text-transform:lowercase;color:var(--gx-muted)!important}
body.page-community .community-detail__author{border-color:rgba(139,233,255,.12)!important;background:rgba(3,8,24,.4)!important}
body.page-community .community-detail__actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin-top:16px}
body.page-community .community-detail__actions>:not(#detailLike):not(#detailShare){grid-column:1/-1}
body.page-community #detailDownload,body.page-community #detailBuy{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px!important;border:0!important;border-radius:14px!important;
  background:linear-gradient(135deg,var(--gx-cyan),var(--gx-violet))!important;color:#031019!important;font:800 15.5px/1 Montserrat,sans-serif!important;
  box-shadow:0 0 30px rgba(125,140,255,.34)!important;text-decoration:none;transition:filter .2s,box-shadow .2s}
body.page-community #detailDownload::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat}
body.page-community #detailDownload:hover,body.page-community #detailBuy:hover{filter:brightness(1.08);box-shadow:0 0 44px rgba(125,140,255,.5)!important}
body.page-community #detailBuy{background:linear-gradient(135deg,#ffd88a,#ff9f6b)!important}
body.page-community .community-detail__actions .community-steam{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px!important;border-radius:13px!important;
  border:1px solid var(--gx-line-hi)!important;background:rgba(31,201,241,.08)!important;color:#fff!important;font:700 14px/1 Montserrat,sans-serif!important}
body.page-community .community-detail__actions .community-steam:hover{background:rgba(31,201,241,.16)!important;border-color:var(--gx-cyan-hi)!important}
body.page-community #detailLike,body.page-community #detailShare{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px!important;border-radius:12px!important;
  border:1px solid rgba(139,233,255,.16)!important;background:rgba(3,8,24,.45)!important;color:rgba(230,240,255,.85)!important;font:700 13.5px/1 Montserrat,sans-serif!important}
body.page-community #detailLike:hover,body.page-community #detailShare:hover{color:#fff!important;border-color:rgba(139,233,255,.4)!important}
body.page-community #detailLike.is-liked{color:#ff8fbf!important;border-color:rgba(255,143,191,.5)!important;background:rgba(255,143,191,.1)!important}
body.page-community #detailFeedback{color:var(--gx-cyan-hi)}
body.page-community .gallery-peek{border-color:rgba(139,233,255,.22)!important;background:rgba(6,12,30,.78)!important}
body.page-community .gallery-peek__arrow{color:var(--gx-cyan-hi)!important}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width:900px){
  body.page-community .community{width:calc(100% - 32px);padding-top:18px}
  body.page-community .gx-hero{grid-template-columns:minmax(0,1fr);gap:14px}
  body.page-community .gx-hero__side{justify-content:space-between}
  body.page-community .gx-total{border:0;padding:0}
  body.page-community .gx-bar{position:relative;top:auto;padding:8px;border-radius:14px}
  body.page-community .gx-colors{flex-wrap:wrap;gap:8px}
  body.page-community .gx-bar__end{margin-left:0}
  body.page-community .gx-bar__row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body.page-community .gx-bar__row::-webkit-scrollbar{display:none}
  body.page-community .gx-seg{flex:none}
  body.page-community .gx-sort>span{display:none}
  body.page-community .gx-colors__label{display:none}
}
@media (max-width:560px){
  body.page-community .gx-hero h1{font-size:30px}
  body.page-community .gx-search{height:50px;padding-left:46px}
  body.page-community .gx-search svg{left:16px}
  body.page-community .gx-card__body{padding:10px 11px 12px!important}
  body.page-community .gx-card__body strong{font-size:13px!important}
  body.page-community .gx-card__type span{display:none}
  body.page-community .gx-card__type{padding:0 8px}
  body.page-community .gx-loading:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.page-community .gx-skel{height:220px}
}
@media (prefers-reduced-motion:reduce){
  body.page-community .gx-card,body.page-community .gx-dot,body.page-community .gx-card__media img{animation:none!important;transition:none!important;opacity:1;translate:none}
  body.page-community .gx-skel,body.page-community .gx-sort__menu{animation:none}
}
