/* Catalog library: the approved NAS poster wall and numbered list. */
.page-catalogs { background:var(--surface-black); color:var(--surface-white); }
.cl-library { max-width:1560px; margin:auto; padding:16px 4.4% 56px; font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
.cl-library [hidden] { display:none !important; }
.cl-library button,.cl-library input,.cl-library select { font:inherit; }
.cl-library button,.cl-library a,.cl-library input,.cl-library select { -webkit-tap-highlight-color:transparent; }
.cl-library button:focus-visible,.cl-library a:focus-visible,.cl-library input:focus-visible,.cl-library select:focus-visible { outline:2px solid var(--brand-gold); outline-offset:4px; }
.cl-library h1,.cl-library h2,.cl-library p { margin:0; }
.cl-topline { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-bottom:10px; }
.cl-topline h1 { font-family:inherit; font-size:40px; font-weight:700; line-height:1.2; letter-spacing:.01em; }
.cl-search { display:flex; align-items:center; gap:13px; width:440px; max-width:50%; min-height:44px; border:1px solid #3a3a3e; border-radius:3px; background:#151518; padding:0 13px; }
.cl-search input { width:100%; min-width:0; height:42px; padding:0; border:0; border-radius:0; background:transparent; color:#f4f3ef; font-size:13px; outline-offset:1px !important; }
.cl-search input::placeholder { color:#aaa9ae; }
.cl-icon { display:inline-block; flex-shrink:0; width:21px; height:21px; background:currentColor; mask:var(--cl-icon) center/contain no-repeat; -webkit-mask:var(--cl-icon) center/contain no-repeat; }
.cl-icon--book { --cl-icon:url('/assets/catalog-library/icons/book-open.svg'); }
.cl-icon--download { --cl-icon:url('/assets/catalog-library/icons/download-simple.svg'); }
.cl-icon--search { --cl-icon:url('/assets/catalog-library/icons/magnifying-glass.svg'); }
.cl-icon--grid { --cl-icon:url('/assets/catalog-library/icons/squares-four.svg'); }
.cl-icon--list { --cl-icon:url('/assets/product-screens/icons/phosphor/regular/list.svg'); }
.cl-icon--close { --cl-icon:url('/assets/product-screens/icons/phosphor/bold/x.svg'); }
.cl-icon--arrow { --cl-icon:url('/assets/product-screens/icons/phosphor/bold/arrow-right.svg'); }
.cl-categories { display:flex; gap:28px; border-bottom:1px solid #353537; }
.cl-categories button { position:relative; color:#d5d3d0; background:none; border:0; border-bottom:2px solid transparent; border-radius:0; padding:10px 3px 11px; margin-bottom:-1px; font-size:14px; cursor:pointer; }
.cl-categories button[aria-pressed="true"] { color:#ff666b; border-bottom-color:#d83840; }
.cl-categories button:hover { color:white; }
.cl-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:11px 0 0; }
.cl-filters { display:flex; flex-wrap:wrap; gap:14px; }
.cl-filters label { position:relative; }
.cl-filters select { width:200px; height:37px; padding:0 34px 0 12px; border:1px solid #343437; border-radius:3px; color:#d8d6d3; background:#101012 url('/assets/product-screens/icons/phosphor/bold/caret-down.svg') right 12px center/12px no-repeat; appearance:auto; background-image:none; font-size:13px; color-scheme:dark; cursor:pointer; }
.cl-views { display:flex; align-items:center; gap:8px; }
.cl-views button { display:flex; align-items:center; justify-content:center; width:40px; height:37px; color:#aaa9af; background:transparent; border:1px solid transparent; border-radius:3px; cursor:pointer; }
.cl-views button .cl-icon { width:25px; height:25px; }
.cl-views button[aria-pressed="true"] { color:#ff666b; background:#261416; }
.cl-status { display:flex; gap:15px; align-items:center; min-height:28px; margin-bottom:5px; color:#a9a7ad; font-size:11px; }
.cl-number-hint { margin-left:auto; }
.cl-status button,.cl-empty button { background:transparent; border:0; padding:8px 0; color:#dfba81; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.cl-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px; row-gap:26px; }
.cl-card { min-width:0; display:grid; grid-template-rows:auto 1fr auto; }
.cl-poster { display:block; position:relative; isolation:isolate; aspect-ratio:2/2.86; overflow:hidden; border:1px solid #454446; background:#161619; color:white; text-decoration:none; }
.cl-photo.media-frame { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:2/2.86; overflow:hidden; background:#171719; }
.cl-photo.media-frame > img { width:100%; height:100%; object-fit:cover; object-position:var(--cl-position,center); transition:transform .25s ease; }
.cl-photo.media-frame.cl-photo--document { inset:25px 10px auto; width:calc(100% - 20px); height:64%; }
.cl-photo.media-frame.cl-photo--document > img { object-fit:contain; }
.cl-poster:hover .cl-photo > img { transform:scale(1.025); }
.cl-poster:hover { border-color:var(--brand-gold); }
.cl-poster-brand { position:absolute; top:14px; left:13px; z-index:1; display:block; background:transparent; padding:5px 7px; }
.cl-poster-brand img { display:block; width:96px; height:auto; }
.cl-poster::after { content:""; position:absolute; inset:32% 0 0; background:linear-gradient(180deg,rgba(7,7,8,0) 0%,rgba(7,7,8,.12) 25%,rgba(7,7,8,.70) 64%,rgba(7,7,8,.97) 100%); pointer-events:none; }
.cl-poster-caption { position:absolute; inset:auto 0 0; z-index:1; padding:0 22px 19px; background:transparent; font-size:18px; line-height:1.23; font-weight:500; letter-spacing:.09em; text-transform:uppercase; text-shadow:0 1px 5px rgba(0,0,0,.35); }
.cl-poster-line { display:block; }
.cl-library[data-locale="en"] .cl-poster-line { white-space:nowrap; }
.cl-poster-line--long { font-size:.9em; letter-spacing:.045em; }
.cl-library[data-locale="zh"] .cl-poster-caption { letter-spacing:.03em; }
.cl-poster-caption::after { content:""; display:block; width:48px; height:2px; margin-top:14px; background:var(--brand-red); }
.cl-archive { position:absolute; z-index:1; top:14px; right:12px; padding:4px 6px; background:#222; font-size:10px; color:#e1c696; }
.cl-card-title { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; align-self:start; gap:4px 7px; margin-top:9px; }
.cl-card-title h2 { font-family:inherit; font-size:14px; font-weight:600; line-height:1.3; }
.cl-card-title .cl-number { grid-column:1/-1; white-space:nowrap; font-size:10px; color:#b4aba0; font-variant-numeric:tabular-nums; }
.cl-version { flex-shrink:0; color:#bdbac0; font-size:10px; line-height:1.4; }
.cl-actions { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.cl-actions a { display:inline-flex; align-items:center; gap:8px; min-height:34px; color:#e9e5e0; font-size:12px; white-space:nowrap; text-decoration:none; }
.cl-actions .cl-icon,.cl-detail-actions .cl-icon { color:var(--brand-gold); }
.cl-actions a:hover,.cl-related:hover { color:var(--brand-gold); text-decoration:underline; text-underline-offset:4px; }
.cl-footnote { border-top:1px solid #303033; margin-top:36px !important; padding-top:20px; text-align:center; color:#bdb9bf; font-size:13px; }
.cl-list { display:grid; grid-template-columns:minmax(0,1fr) 27%; border-top:1px solid #343437; gap:24px; align-items:start; }
.cl-rows { min-width:0; }
.cl-list-head { display:grid; grid-template-columns:123px minmax(0,1fr) 84px 194px; align-items:center; min-height:44px; padding:0 10px; font-size:13px; color:#e2dfdb; border-bottom:1px solid #343437; gap:8px; }
.cl-row { display:grid; grid-template-columns:minmax(0,1fr) 84px 194px; align-items:center; min-height:69px; padding:5px 10px; gap:8px; border-bottom:1px solid #2c2c2f; border-left:3px solid transparent; }
.cl-row.is-selected { background:#241619; border-left-color:#de474f; }
.cl-row:hover { background:#1b1a1c; }
.cl-row.is-selected:hover { background:#2b191c; }
.cl-row-select { display:flex; align-items:center; gap:18px; width:100%; min-width:0; text-align:left; border:0; padding:0; background:none; color:#efede9; cursor:pointer; }
.cl-row .cl-number { width:105px; flex-shrink:0; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-row.is-selected .cl-number { color:#ff6b70; }
.cl-thumb.media-frame { display:block; width:38px; height:55px; aspect-ratio:2/2.86; flex-shrink:0; overflow:hidden; border:1px solid #454446; background:#171719; }
.cl-thumb.media-frame > img { width:100%; height:100%; object-fit:cover; object-position:var(--cl-position,center); }
.cl-thumb.media-frame.cl-photo--document > img { object-fit:contain; }
.cl-row-name { font-size:15px; line-height:1.35; }
.cl-row-name small { display:block; font-size:10px; color:#b5b0ad; padding-top:3px; }
.cl-row-type { color:#c7c3c0; font-size:12px; }
.cl-row .cl-actions a { font-size:12px; gap:7px; }
.cl-detail { min-width:0; border-left:1px solid #353538; padding:16px 0 10px 26px; position:sticky; top:90px; }
.cl-detail-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.cl-detail-heading p { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.cl-detail-heading p span { display:block; color:#d2bc9d; margin-top:5px; white-space:nowrap; }
.cl-detail-heading button { display:none; }
.cl-detail h2 { margin-top:15px; font-size:23px; font-family:inherit; line-height:1.25; }
.cl-detail .cl-poster-caption { font-size:26px; padding:0 24px 23px; }
.cl-detail .cl-detail-meta { font-size:12px; margin-top:8px; color:#c8c4c8; }
.cl-description { margin-top:14px !important; color:#d6d1d0; font-size:13px; line-height:1.55; }
.cl-detail-actions { display:grid; gap:9px; margin-top:16px; }
.cl-detail-actions a { min-height:40px; padding:8px; border:1px solid #676165; border-radius:3px; display:flex; justify-content:center; align-items:center; gap:10px; font-size:12px; color:#f4f3ef; text-decoration:none; }
.cl-detail-actions .cl-primary { border-color:#9b2024; background:#9b2024; }
.cl-detail-actions .cl-primary .cl-icon { color:#fff; }
.cl-detail-actions a:hover { border-color:var(--brand-gold); }
.cl-related { display:inline-flex; align-items:center; gap:12px; margin-top:16px; font-size:12px; color:var(--brand-gold); text-underline-offset:4px; }
.cl-empty { padding:80px 20px; text-align:center; border:1px solid #353538; background:#121214; }
.cl-empty .cl-icon { width:32px; height:32px; color:var(--brand-gold); }
.cl-empty h2 { font-family:inherit; font-size:25px; margin:15px 0 10px; }
.cl-empty p { color:#c7c3c0; font-size:14px; margin-bottom:10px; }
@media (min-width:1600px) { .cl-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:1200px) {
  .cl-library { padding-right:3%; padding-left:3%; }
  .cl-grid { gap:18px; row-gap:26px; }
  .cl-poster-caption { font-size:15px; padding:0 16px 17px; }
  .cl-poster-brand { top:9px; left:8px; }
  .cl-poster-brand img { width:78px; }
  .cl-list { grid-template-columns:minmax(0,1fr) 28%; gap:16px; }
  .cl-list-head { grid-template-columns:106px minmax(0,1fr) 55px 154px; }
  .cl-row { grid-template-columns:minmax(0,1fr) 55px 154px; padding-left:6px; padding-right:6px; }
  .cl-row-select { gap:10px; }
  .cl-row .cl-number { width:96px; font-size:11px; }
  .cl-row-name { font-size:12px; }
  .cl-row .cl-actions { gap:6px; }
  .cl-row .cl-actions a { gap:4px; font-size:10px; }
  .cl-row .cl-actions .cl-icon { width:17px; height:17px; }
  .cl-detail { padding-left:16px; }
}
@media (max-width:900px) {
  .cl-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cl-topline h1 { font-size:33px; }
  .cl-search { max-width:55%; }
  .cl-filters select { width:170px; }
  .cl-categories { gap:20px; }
  .cl-list { display:block; }
  .cl-list-head { grid-template-columns:106px minmax(0,1fr) 70px 182px; }
  .cl-row { grid-template-columns:minmax(0,1fr) 70px 182px; }
  .cl-row-name { font-size:14px; }
  .cl-row .cl-actions a { font-size:12px; gap:6px; }
  .cl-detail { position:static; display:grid; grid-template-columns:150px minmax(0,1fr); column-gap:22px; border:1px solid #523438; background:#1a1315; padding:18px; margin-bottom:10px; }
  .cl-detail-heading { grid-column:1/-1; margin-bottom:14px; }
  .cl-detail-heading button { display:flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; background:transparent; color:#ccc; border:1px solid #645256; cursor:pointer; }
  .cl-detail > .cl-poster { grid-column:1; grid-row:2/7; align-self:start; }
  .cl-detail h2 { margin-top:0; font-size:21px; }
  .cl-detail .cl-poster-caption { font-size:13px; padding:0 12px 13px; }
  .cl-detail-actions { grid-column:2; }
  .cl-related { grid-column:2; }
  .cl-detail .cl-description { font-size:12px; }
  .cl-number-hint { display:none; }
  .cl-status [data-reset] { margin-left:auto; }
}
@media (max-width:600px) {
  .cl-library { padding:22px 18px 40px; }
  .cl-topline { align-items:flex-start; gap:17px; flex-direction:column; margin-bottom:14px; }
  .cl-topline h1 { font-size:31px; }
  .cl-search { width:100%; max-width:none; min-height:44px; }
  .cl-search input { font-size:16px; }
  .cl-categories { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
  .cl-categories button { text-align:left; font-size:13px; padding:11px 0; }
  .cl-toolbar { align-items:flex-end; gap:9px; }
  .cl-filters { display:grid; grid-template-columns:1fr 1fr; flex:1; min-width:0; gap:9px; }
  .cl-filters label { min-width:0; }
  .cl-filters label:nth-child(3) { grid-column:1/-1; }
  .cl-filters select { width:100%; min-width:0; height:40px; font-size:12px; padding:0 4px 0 8px; }
  .cl-views { gap:2px; }
  .cl-views button { width:34px; height:40px; }
  .cl-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
  .cl-poster-caption { padding:0 12px 15px; font-size:13px; letter-spacing:.06em; }
  .cl-poster-caption::after { width:36px; margin-top:11px; }
  .cl-poster-brand { padding:4px; top:8px; left:6px; }
  .cl-poster-brand img { width:68px; }
  .cl-card-title { gap:5px; }
  .cl-card-title h2 { font-size:12px; }
  .cl-card-title .cl-number { font-size:9px; }
  .cl-actions { gap:5px; }
  .cl-actions a { font-size:10px; gap:5px; min-height:40px; }
  .cl-actions .cl-icon { width:17px; height:17px; }
  .cl-list-head { display:none; }
  .cl-row { grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; padding:10px 7px; }
  .cl-row-select { display:grid; grid-template-columns:32px minmax(0,1fr); grid-column:1; grid-row:1; gap:3px 8px; }
  .cl-row .cl-number { width:auto; font-size:10px; grid-column:2; grid-row:2; }
  .cl-row .cl-thumb { grid-column:1; grid-row:1/3; }
  .cl-row .cl-row-name { grid-column:2; grid-row:1; min-width:0; }
  .cl-thumb.media-frame { width:32px; height:47px; }
  .cl-row-name { font-size:12px; }
  .cl-row-name small { font-size:9px; }
  .cl-row-type { display:none; }
  .cl-row .cl-actions { grid-column:2; grid-row:1; gap:9px; }
  .cl-row .cl-actions a { font-size:12px; gap:4px; min-height:44px; min-width:32px; }
  .cl-row .cl-actions .cl-icon { display:none; }
  .cl-detail { grid-template-columns:98px minmax(0,1fr); column-gap:15px; padding:12px; }
  .cl-detail-heading p { font-size:11px; }
  .cl-detail h2 { font-size:17px; }
  .cl-detail .cl-detail-meta { font-size:10px; line-height:1.6; }
  .cl-detail .cl-description { font-size:11px; margin-top:9px !important; }
  .cl-detail .cl-poster-caption { font-size:9px; letter-spacing:.025em; padding:0 8px 10px; }
  .cl-detail .cl-poster-caption::after { width:25px; margin-top:7px; }
  .cl-detail .cl-poster-brand img { width:50px; }
  .cl-detail-actions { grid-column:1/-1; grid-template-columns:1fr 1fr; margin-top:14px; }
  .cl-detail-actions a { font-size:11px; gap:5px; }
  .cl-related { grid-column:1/-1; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { .cl-photo.media-frame > img { transition:none; } }

/* Catalog actions occupy the main content; shared contact remains in the header/footer. */
.page-catalogs .floating-actions,.page-catalogs .mobile-contact-actions { display:none; }