.catalog-layout { padding-top: 30px; }
.catalog-showcase { position: relative; min-height: 210px; margin-bottom: 18px; padding: 34px 38px; overflow: hidden; border-radius: 12px; background: linear-gradient(110deg,#17252b 0%,#243a40 58%,#314b50 100%); color: #fff; }
.catalog-showcase::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 67% 20%,rgba(205,227,222,.16),transparent 30%),linear-gradient(90deg,transparent 45%,rgba(255,255,255,.035)); pointer-events: none; }
.catalog-showcase-copy { position: relative; z-index: 2; align-self: center; }
.catalog-showcase .catalog-eyebrow { color: #9cc5c5; }
.catalog-showcase h1 { color: #fff; font-size: 32px; font-weight: 600; letter-spacing: -.03em; }
.catalog-showcase .catalog-description { color: #c6d3d4; font-size: 14px; }
.catalog-showcase-meta { display: flex; align-items: baseline; gap: 9px; margin-top: 27px; color: #aebfc1; font-size: 12px; }
.catalog-showcase-meta strong { color: #fff; font: 500 28px/1 Georgia,serif; }
.catalog-showcase-meta i { width: 1px; height: 12px; margin: 0 5px; background: rgba(255,255,255,.22); }
.catalog-showcase-art { position: absolute; z-index: 1; right: 32px; bottom: -62px; width: 410px; height: 250px; }
.catalog-showcase-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 42px; height: 22px; background: rgba(8,15,18,.35); filter: blur(16px); border-radius: 50%; }
.catalog-showcase-art img { position: absolute; bottom: 0; width: 142px; height: 224px; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(5,12,15,.38)); }
.catalog-showcase-art img:nth-child(1) { left: 20px; transform: rotate(-7deg) translateY(13px); opacity: .82; }
.catalog-showcase-art img:nth-child(2) { left: 130px; z-index: 2; width: 158px; height: 244px; }
.catalog-showcase-art img:nth-child(3) { right: 0; transform: rotate(7deg) translateY(16px); opacity: .8; }

.catalog-layout .collection-entries { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 46px; }
.catalog-layout .collection-entry { position: relative; isolation: isolate; display: flex; flex-direction: row; align-items: flex-end; gap: 12px; min-height: 126px; padding: 16px; overflow: hidden; border: 1px solid #e5e9ea; border-radius: 8px; background: #222; color: #fff; }
.catalog-layout .collection-entry::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(13,19,22,.05) 5%,rgba(13,19,22,.9) 100%); }
.catalog-layout .collection-entry::after { content: ''; position: absolute; inset: 0; z-index: -2; background: #26353a; }
.catalog-layout .collection-entry > img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .25s ease,filter .25s ease; }
.catalog-layout .collection-entry:hover { border-color: #a7b9bb; background: #222; }
.catalog-layout .collection-entry:hover > img { transform: scale(1.04); filter: saturate(.92); }
.catalog-layout .collection-entry.is-active { border-color: #d87479; box-shadow: inset 0 -2px #d87479; }
.collection-copy { display: grid; gap: 2px; min-width: 0; }
.collection-copy small { color: #b9cacb; font-size: 9px; letter-spacing: .14em; }
.collection-copy strong { color: #fff; font-size: 15px; font-weight: 600; }
.collection-copy em { color: #c0cbcc; font-size: 11px; font-style: normal; }
.catalog-layout .collection-arrow { align-self: flex-end; color: rgba(255,255,255,.8); font-size: 16px; }

.catalog-layout .hero-library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.hero-library-heading > div > p { margin: 0 0 5px; color: #799196; font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.catalog-layout .hero-library-heading h2 { font-size: 22px; }
.catalog-layout .hero-library-heading h2 span { display: inline-grid; place-items: center; min-width: 24px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 10px; background: #eef2f2; color: #718287; font-size: 11px; }
.hero-library-heading > span { color: #9aa3a6; font-size: 11px; }
.catalog-layout .catalog-toolbar { gap: 8px; padding: 12px; border: 0; border-radius: 8px; background: #f5f7f7; }
.catalog-layout .catalog-toolbar input,.catalog-layout .catalog-toolbar select { border-color: #e1e6e7; background: rgba(255,255,255,.92); }
.catalog-layout .catalog-toolbar button { border: 0; background: transparent; color: #76878b; }
.catalog-layout .catalog-status { margin-top: 18px; }
.catalog-layout .catalog-art { background: #f4f5f5; border-radius: 8px; }
.catalog-layout .catalog-card:hover .catalog-art { background: #eaeeee; }

@media(max-width:900px) {
  .catalog-showcase-art { right: -20px; opacity: .72; }
  .catalog-layout .collection-entries { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .catalog-layout { padding-top: 18px; }
  .catalog-showcase { min-height: 184px; padding: 26px 22px; }
  .catalog-showcase h1 { font-size: 27px; }
  .catalog-showcase-art { right: -82px; bottom: -74px; transform: scale(.78); transform-origin: center bottom; opacity: .5; }
  .catalog-showcase-meta { margin-top: 20px; }
  .catalog-layout .collection-entries { gap: 8px; margin-bottom: 32px; }
  .catalog-layout .collection-entry { min-height: 104px; flex-direction: row; align-items: flex-end; padding: 12px; }
  .collection-copy strong { font-size: 13px; }
  .collection-copy em { display: none; }
  .catalog-layout .hero-library-heading { align-items: flex-start; }
  .hero-library-heading > span { display: none; }
  .catalog-layout .catalog-toolbar { padding: 9px; }
}
@media(prefers-reduced-motion:reduce) { .catalog-layout .collection-entry > img { transition: none; } }

/* Desktop catalog workspace: compact collection rail beside the active archive. */
@media(min-width:901px) {
  .catalog-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
    column-gap: 32px;
    padding-top: 30px;
  }
  .catalog-layout > .catalog-heading {
    grid-column: 1 / -1;
  }
  .catalog-layout > .collection-entries {
    position: sticky;
    top: 84px;
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    padding: 6px;
    border: 1px solid #e8edef;
    border-radius: 16px;
    background: #f7f9f9;
  }
  .catalog-layout > .collection-entries .collection-entry {
    min-height: 78px;
    padding: 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #273137;
    box-shadow: none;
  }
  .catalog-layout > .collection-entries .collection-entry::before,
  .catalog-layout > .collection-entries .collection-entry::after { display: none; }
  .catalog-layout > .collection-entries .collection-entry > img {
    position: static;
    inset: auto;
    z-index: auto;
    filter: none;
  }
  .catalog-layout > .collection-entries .collection-entry:hover {
    background: #fff;
  }
  .catalog-layout > .collection-entries .collection-entry.is-active {
    background: #fff;
    color: #172126;
    box-shadow: 0 6px 18px #17212c10, inset 3px 0 #d94a50;
  }
  .catalog-layout > #catalog-heroes-panel,
  .catalog-layout > #catalog-other-panel {
    grid-column: 2;
    min-width: 0;
  }
}

.catalog-layout .collection-entry > img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 9px; object-fit: cover; opacity: .86; }
.catalog-layout .collection-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.catalog-layout .collection-copy strong { color: #273137; font-size: 14px; font-weight: 650; }
.catalog-layout .collection-copy em { color: #7c8a90; font-size: 11px; font-style: normal; white-space: nowrap; }
.catalog-layout .collection-entry.is-active .collection-copy strong { color: #172126; }
.catalog-layout .collection-entry.is-active .collection-copy em { color: #66777d; }
.catalog-layout .collection-arrow { margin-left: auto; color: #8ea0a4; font-size: 20px; font-weight: 300; }
.catalog-layout .collection-entry.is-active .collection-arrow { color: #d94a50; }
.catalog-subtoolbar { min-height: 66px; display: flex; align-items: center; gap: 18px; padding: 10px 14px 14px; border-bottom: 1px solid #e5eaec; }
.catalog-subtoolbar > span { display: flex; flex-direction: column; gap: 4px; }
.catalog-subtoolbar strong { font-size: 18px; }
.catalog-subtoolbar small { color: #89969b; font-size: 11px; }
.catalog-subtoolbar input { width: min(420px, 56%); min-height: 42px; margin-left: auto; padding: 0 14px; border: 1px solid #e0e6e8; border-radius: 8px; background: #f8f9fa; font: inherit; }
.catalog-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 24px; }
.catalog-resource-card { display: flex; align-items: center; gap: 14px; min-height: 90px; padding: 12px; border: 1px solid #e8edef; border-radius: 12px; background: #fff; color: #273137; text-align: left; transition: border-color .18s, transform .18s, box-shadow .18s; }
.catalog-resource-card:hover { transform: translateY(-2px); border-color: #bdcccf; box-shadow: 0 10px 24px #17212c0c; }
.resource-thumb { width: 62px; height: 62px; flex: 0 0 62px; overflow: hidden; border-radius: 9px; background: #edf1f2; }
.resource-thumb img { width: 100%; height: 100%; object-fit: cover; }
.catalog-resource-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 7px; }
.catalog-resource-card strong { font-size: 14px; }
.catalog-resource-card small { color: #89969b; font-size: 11px; }
.catalog-resource-card i { margin-left: auto; color: #9ba8ac; font-size: 20px; font-style: normal; }
@media(min-width:901px) {
  .catalog-layout .catalog-grid { gap: 18px 16px; }
  .catalog-layout .catalog-art { height: 176px; padding: 8px 6px; }
  .catalog-layout .catalog-card-info { padding-top: 8px; }
}
@media(max-width:900px) {
  .catalog-layout .collection-entry > img { width: 42px; height: 42px; flex-basis: 42px; }
  .catalog-layout .collection-copy em { display: none; }
  .catalog-resource-grid { grid-template-columns: 1fr; }
}