/* Content List Page (v2.0) – Scoped with clx-**** numeric suffixes
   Goals:
   - Modern, clean aesthetic (glass / layered gradients)
   - Accessible contrast + focus
   - Smooth micro‑interactions (respect reduced motion)
   - Responsive from mobile up
   - Minimal leakage (all selectors prefixed)
*/

/* -------------------------------------------------------------------------- */
/* ROOT TOKENS                                                                */
/* -------------------------------------------------------------------------- */
.clx-page-root1001 {
  --clx-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --clx-bg: #0c111c;
  --clx-bg-alt: #121a27;
  --clx-bg-soft: #182233;
  --clx-surface: rgba(255,255,255,0.05);
  --clx-surface-alt: rgba(255,255,255,0.08);
  --clx-glass-a: rgba(255,255,255,0.06);
  --clx-glass-b: rgba(255,255,255,0.10);
  --clx-border: rgba(255,255,255,0.12);
  --clx-border-strong: rgba(255,255,255,0.22);
  --clx-shadow-sm: 0 4px 14px -4px rgba(0,0,0,.55);
  --clx-shadow: 0 10px 40px -8px rgba(0,0,0,.65);
  --clx-shadow-focus: 0 0 0 3px rgba(124,162,255,.35);
  --clx-fg: #f1f5fa;
  --clx-fg-dim: #b0bccf;
  --clx-fg-muted: #7d8aa0;
  --clx-accent: #6d8dff;
  --clx-accent-rgb: 109,141,255;
  --clx-accent-alt: #8f67ff;
  --clx-danger: #ff5d74;
  --clx-success: #37d690;
  --clx-warning: #ffc247;
  --clx-radius-xs: 4px;
  --clx-radius-sm: 6px;
  --clx-radius: 12px;
  --clx-radius-lg: 18px;
  --clx-radius-xl: 28px;
  --clx-radius-pill: 999px;
  --clx-speed: .55s;
  --clx-speed-fast: .32s;
  --clx-ease: cubic-bezier(.65,.05,.36,1);
  --clx-ease-out: cubic-bezier(.16,.84,.44,1);
  --clx-grad-accent: linear-gradient(135deg,#6d8dff 0%,#8f67ff 33%,#27c5f6 100%);
  --clx-grad-soft:
    radial-gradient(1000px 700px at 15% 5%,rgba(141,119,255,.25),transparent 65%),
    radial-gradient(900px 600px at 90% 20%,rgba(39,197,246,.18),transparent 65%);
  font-family: var(--clx-font-sans);
  background: var(--clx-bg);
  color: var(--clx-fg);
  -webkit-font-smoothing: antialiased;
}

[data-theme="light"] .clx-page-root1001 {
  --clx-bg: #f4f7fb;
  --clx-bg-alt: #ffffff;
  --clx-bg-soft: #eef2f8;
  --clx-surface: rgba(0,0,0,0.04);
  --clx-surface-alt: rgba(0,0,0,0.06);
  --clx-glass-a: rgba(255,255,255,0.65);
  --clx-glass-b: rgba(255,255,255,0.85);
  --clx-border: rgba(0,0,0,0.10);
  --clx-border-strong: rgba(0,0,0,0.22);
  --clx-fg: #1f2b3a;
  --clx-fg-dim: #4b5a6c;
  --clx-fg-muted: #6a7a8f;
  --clx-shadow-sm: 0 4px 14px -4px rgba(0,0,0,.15);
  --clx-shadow: 0 16px 46px -12px rgba(0,0,0,.18);
  --clx-shadow-focus: 0 0 0 3px rgba(109,141,255,.4);
  --clx-grad-soft:
    radial-gradient(1000px 700px at 10% 10%,rgba(109,141,255,.22),transparent 65%),
    radial-gradient(900px 600px at 90% 30%,rgba(143,103,255,.18),transparent 70%);
}

/* Utility container (inherit existing class usage) */
.clx-container1007 {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.4rem;
  position: relative;
}

/* -------------------------------------------------------------------------- */
/* HERO                                                                       */
/* -------------------------------------------------------------------------- */
.clx-hero1002 {
  position: relative;
  padding: 5.5rem 0 3.5rem;
  background:
    var(--clx-grad-soft),
    linear-gradient(150deg,var(--clx-bg-alt),var(--clx-bg) 70%);
  overflow: hidden;
  isolation: isolate;
}

.clx-hero-bg1004 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.clx-hero-gradient1006 {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 68%,rgba(var(--clx-accent-rgb),.22),transparent 60%),
    radial-gradient(circle at 15% 25%,rgba(143,103,255,.22),transparent 65%);
  mix-blend-mode: overlay;
  opacity: .6;
}

.clx-hero-inner1008 {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
  align-items: flex-start;
}

.clx-hero-copy1009 {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 640px;
}

.clx-hero-badge1010 {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .95rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  border: 1px solid var(--clx-border);
  border-radius: var(--clx-radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.clx-hero-badge1010:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,rgba(var(--clx-accent-rgb),.2),transparent 55%);
  opacity: 0;
  transition: opacity .5s var(--clx-ease-out);
}

.clx-hero-badge1010:hover:before { opacity: 1; }

.clx-hero-title1012 {
  margin: 0;
  font-size: clamp(2.4rem,4.8vw,3.7rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(90deg,#fff,#e1e8f5);
  -webkit-background-clip: text;
  color: transparent;
}

[data-theme="light"] .clx-hero-title1012 {
  background: linear-gradient(90deg,#1f2b3a,#4a5b72);
  -webkit-background-clip: text;
}

.clx-hero-accent1013 {
  background: var(--clx-grad-accent);
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}

.clx-hero-sub1014 {
  margin: .25rem 0 0;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--clx-fg-dim);
  font-weight: 500;
  max-width: 640px;
}

.clx-hero-stats1015 {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: .5rem;
}

.clx-stat1016,
.clx-stat1020,
.clx-stat1024 {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--clx-border);
  background: linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  border-radius: var(--clx-radius-lg);
  position: relative;
  overflow: hidden;
  min-width: 160px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .45s var(--clx-ease-out), transform .45s var(--clx-ease-out);
}

.clx-stat1016:before,
.clx-stat1020:before,
.clx-stat1024:before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 85% 25%,rgba(var(--clx-accent-rgb),.22),transparent 70%);
  opacity: 0;
  transition: opacity .6s var(--clx-ease-out);
}

.clx-stat1016:hover:before,
.clx-stat1020:hover:before,
.clx-stat1024:hover:before { opacity: .9; }

.clx-stat1016:hover,
.clx-stat1020:hover,
.clx-stat1024:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--clx-accent-rgb),.55);
}

.clx-stat-val1017,
.clx-stat-val1021,
.clx-stat-val1025 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--clx-fg);
}

.clx-stat-label1019,
.clx-stat-label1023,
.clx-stat-label1027 {
  font: 600 .58rem/1 var(--clx-font-sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--clx-fg-muted);
}

/* HERO ACTIONS */
.clx-hero-actions1028 {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

.clx-btn-primary1030,
.clx-btn-ghost1033,
.clx-btn-soft1062,
.clx-btn-primary-sm1103,
.clx-btn-primary-xs1150 {
  --_padding-y: .9rem;
  --_padding-x: 1.25rem;
  --_font-size: .72rem;
  --_radius: var(--clx-radius);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: var(--_padding-y) var(--_padding-x);
  font: 600 var(--_font-size)/1 var(--clx-font-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  border-radius: var(--_radius);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: background .5s var(--clx-ease), transform .5s var(--clx-ease), box-shadow .5s var(--clx-ease);
  white-space: nowrap;
}

.clx-btn-primary1030,
.clx-btn-primary-sm1103,
.clx-btn-primary-xs1150 {
  background: var(--clx-grad-accent);
  color: #141b2b;
  border: 1px solid rgba(var(--clx-accent-rgb),.55);
  box-shadow: 0 8px 24px -6px rgba(var(--clx-accent-rgb),.55);
}

.clx-btn-primary1030:hover,
.clx-btn-primary-sm1103:hover,
.clx-btn-primary-xs1150:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -10px rgba(var(--clx-accent-rgb),.65);
}

.clx-btn-ghost1033 {
  background: linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  color: var(--clx-fg-dim);
  border: 1px solid var(--clx-border);
}

.clx-btn-ghost1033:hover {
  color: var(--clx-fg);
  border-color: rgba(var(--clx-accent-rgb),.6);
  box-shadow: 0 8px 26px -8px rgba(var(--clx-accent-rgb),.5);
}

.clx-btn-soft1062 {
  background: linear-gradient(135deg,var(--clx-bg-soft),var(--clx-bg-alt));
  border: 1px solid var(--clx-border);
  color: var(--clx-fg-muted);
}

.clx-btn-soft1062:hover {
  color: var(--clx-fg);
  border-color: rgba(var(--clx-accent-rgb),.5);
}

.clx-btn-icon1105,
.clx-btn-icon-sm1152 {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--clx-border);
  background: linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  color: var(--clx-fg-dim);
  border-radius: var(--clx-radius);
  cursor: pointer;
  transition: .45s var(--clx-ease-out);
}

.clx-btn-icon-sm1152 {
  width: 40px;
  height: 40px;
  border-radius: var(--clx-radius-sm);
}

.clx-btn-icon1105:hover,
.clx-btn-icon-sm1152:hover {
  color: var(--clx-fg);
  border-color: rgba(var(--clx-accent-rgb),.55);
  background: linear-gradient(135deg,rgba(var(--clx-accent-rgb),.15),rgba(var(--clx-accent-rgb),.05));
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -8px rgba(var(--clx-accent-rgb),.5);
}

/* -------------------------------------------------------------------------- */
/* SEARCH CARD                                                                */
/* -------------------------------------------------------------------------- */
.clx-search-card1035 {
  flex: 1 1 420px;
  max-width: 520px;
  background: linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  border: 1px solid var(--clx-border);
  border-radius: var(--clx-radius-xl);
  padding: 1.6rem 1.55rem 1.85rem;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--clx-shadow-sm);
}

.clx-search-card1035:before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(var(--clx-accent-rgb),.18),transparent 60%),
    radial-gradient(circle at 90% 15%,rgba(143,103,255,.25),transparent 65%);
  opacity:.45;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.clx-search-form1036 {
  display:flex;
  flex-direction:column;
  gap:1.35rem;
  position:relative;
  z-index:1;
}

.clx-search-head1037 {
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.clx-search-title1038 {
  margin:0;
  font-size:.68rem;
  letter-spacing:.18em;
  font-weight:700;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
  display:flex;
  align-items:center;
  gap:.55rem;
}

.clx-search-sub1040 {
  margin:0;
  font-size:.9rem;
  color:var(--clx-fg-dim);
  font-weight:500;
}

.clx-search-row1041 {
  display:flex;
  gap:.75rem;
  align-items:stretch;
  flex-wrap:wrap;
}

.clx-search-field1042 {
  position:relative;
  flex:1 1 260px;
  display:flex;
  align-items:center;
}

.clx-field-ic1043 {
  position:absolute;
  left:.9rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--clx-fg-muted);
  font-size:.9rem;
  pointer-events:none;
}

.clx-input1045 {
  width:100%;
  padding:.95rem 1rem .95rem 2.6rem;
  background:linear-gradient(135deg,var(--clx-bg-soft),var(--clx-bg-alt));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius);
  color:var(--clx-fg);
  font:500 .9rem/1.25 var(--clx-font-sans);
  transition:.45s var(--clx-ease-out);
}

.clx-input1045:focus {
  outline:none;
  border-color:rgba(var(--clx-accent-rgb),.65);
  box-shadow:0 0 0 3px rgba(var(--clx-accent-rgb),.3);
}

.clx-suggest1046 {
  position:absolute;
  left:0;
  top:calc(100% + .55rem);
  width:100%;
  background:linear-gradient(135deg,var(--clx-bg-alt),var(--clx-bg-soft));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius-lg);
  box-shadow:var(--clx-shadow-sm);
  padding:.4rem 0;
  display:none;
  z-index:30;
  max-height:260px;
  overflow:auto;
  scrollbar-width:thin;
}

.clx-suggest1046::-webkit-scrollbar { width:8px; }
.clx-suggest1046::-webkit-scrollbar-thumb {
  background:var(--clx-bg-soft);
  border-radius:6px;
}

.clx-filter-grid1048 {
  display:grid;
  gap:1rem 1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}

.clx-filter-group1049,
.clx-filter-group1056,
.clx-filter-group1058 {
  display:flex;
  flex-direction:column;
  gap:.45rem;
  min-width:120px;
}

.clx-filter-label1050 {
  font:600 .58rem/1 var(--clx-font-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
  display:flex;
  align-items:center;
  gap:.45rem;
}

.clx-select-wrap1053 {
  position:relative;
}

.clx-select1054 {
  width:100%;
  padding:.75rem .9rem;
  background:linear-gradient(135deg,var(--clx-bg-soft),var(--clx-bg-alt));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius);
  color:var(--clx-fg);
  font:500 .78rem/1.2 var(--clx-font-sans);
  letter-spacing:.05em;
  appearance:none;
  transition:.4s var(--clx-ease-out);
  cursor:pointer;
}

/* Accessible dropdown contrast overrides */
.clx-select1054 { color: var(--clx-fg); background: linear-gradient(135deg, var(--clx-bg-soft), var(--clx-bg-alt)); }
.clx-select1054 option { color: var(--clx-fg); background: var(--clx-bg-alt); }
.clx-select1054 optgroup { color: var(--clx-fg-dim); background: var(--clx-bg-alt); font-style: normal; }
.clx-select1054:focus option:checked { background: rgba(var(--clx-accent-rgb), .35); }

/* Hover/active simulation (Firefox honors) */
.clx-select1054 option:checked, .clx-select1054 option:selected { background: rgba(var(--clx-accent-rgb), .25); color: var(--clx-fg); }

/* Suggestion list items (shared) */
.clx-suggest-item { background: var(--clx-bg-alt); color: var(--clx-fg-dim); }
.clx-suggest-item strong { color: var(--clx-accent); }
.clx-suggest-item:hover, .clx-suggest-item.active { background: var(--clx-bg-soft); color: var(--clx-fg); }

/* Light theme adjustments */
[data-theme="light"] .clx-select1054 { background: linear-gradient(135deg, var(--clx-bg-soft), var(--clx-bg-alt)); color: var(--clx-fg); }
[data-theme="light"] .clx-select1054 option, [data-theme="light"] .clx-select1054 optgroup { background: #fff; color: var(--clx-fg); }
[data-theme="light"] .clx-select1054 option:checked { background: rgba(var(--clx-accent-rgb), .18); }
[data-theme="light"] .clx-suggest-item { background: #ffffff; color: var(--clx-fg-dim); }
[data-theme="light"] .clx-suggest-item:hover, [data-theme="light"] .clx-suggest-item.active { background: var(--clx-bg-soft); color: var(--clx-fg); }

/* High contrast media query */
@media (prefers-contrast: more) {
  .clx-select1054 { border-color: var(--clx-border-strong); }
  .clx-select1054 option:checked { outline: 2px solid var(--clx-accent); }
  .clx-suggest-item { border-bottom: 1px solid var(--clx-border-strong); }
}
/* End dropdown contrast overrides */

.clx-select1054:focus {
  outline:none;
  border-color:rgba(var(--clx-accent-rgb),.6);
  box-shadow:0 0 0 2px rgba(var(--clx-accent-rgb),.25);
}

.clx-select-caret1055 {
  position:absolute;
  top:50%;
  right:.85rem;
  transform:translateY(-50%);
  font-size:.7rem;
  color:var(--clx-fg-muted);
  pointer-events:none;
}

.clx-filter-actions1060 {
  display:flex;
  align-items:flex-end;
}

/* -------------------------------------------------------------------------- */
/* FEATURED SECTION                                                           */
/* -------------------------------------------------------------------------- */
.clx-featured1063 {
  padding:2.8rem 0 2.6rem;
  background:linear-gradient(180deg,var(--clx-bg-alt),transparent 85%);
  position:relative;
}

.clx-section-head1065 {
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin:0 0 1.4rem;
}

.clx-section-title1066 {
  margin:0;
  font:700 .72rem/1 var(--clx-font-sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--clx-fg-muted);
  display:flex;
  align-items:center;
  gap:.65rem;
}

.clx-section-ic1067 {
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-grid;
  place-items:center;
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  border:1px solid var(--clx-border);
  color:var(--clx-accent);
  font-size:.9rem;
  box-shadow:var(--clx-shadow-sm);
}

.clx-section-sub1068 {
  margin:0;
  font-size:.92rem;
  color:var(--clx-fg-dim);
  max-width:520px;
  line-height:1.5;
  font-weight:500;
}

.clx-featured-swiper1069 { position:relative; }

.clx-featured-track1070 { align-items:stretch; }

.clx-featured-slide1071 { height:auto; }

.clx-featured-card1072 {
  height:100%;
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg,var(--clx-bg-soft),var(--clx-bg-alt));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius-xl);
  overflow:hidden;
  position:relative;
  transition:.65s var(--clx-ease);
  box-shadow:var(--clx-shadow-sm);
}

.clx-featured-card1072:hover {
  transform:translateY(-8px);
  border-color:rgba(var(--clx-accent-rgb),.55);
  box-shadow:var(--clx-shadow);
}

.clx-featured-media1073 {
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
}

.clx-featured-img1074,
.clx-asset-img1125 {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1s var(--clx-ease);
}

.clx-featured-card1072:hover .clx-featured-img1074,
.clx-asset-card1122:hover .clx-asset-img1125 { transform:scale(1.08); }

.clx-featured-overlay1075 {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:.8rem .7rem .7rem;
  opacity:0;
  background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.55));
  transition:.6s var(--clx-ease-out);
}

.clx-featured-card1072:hover .clx-featured-overlay1075 { opacity:1; }

.clx-card-top1076,
.clx-asset-top1127 {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.55rem;
}

.clx-card-actions1077,
.clx-asset-actions1128 {
  display:flex;
  gap:.45rem;
}

.clx-act-btn1078 {
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--clx-border);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  color:var(--clx-fg-dim);
  font-size:.9rem;
  border-radius:var(--clx-radius);
  cursor:pointer;
  transition:.45s var(--clx-ease-out);
}

.clx-act-btn1078[data-liked="true"] {
  color:var(--clx-danger);
  border-color:rgba(255,93,116,.5);
  background:linear-gradient(135deg,rgba(255,93,116,.15),rgba(255,93,116,.05));
}

.clx-act-btn1078:hover {
  color:var(--clx-fg);
  border-color:rgba(var(--clx-accent-rgb),.55);
  background:linear-gradient(135deg,rgba(var(--clx-accent-rgb),.15),rgba(var(--clx-accent-rgb),.05));
  transform:translateY(-3px);
}

.clx-card-badges1083,
.clx-asset-badges1130 {
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}

.clx-badge-type1084,
.clx-badge-new1085 {
  padding:.4rem .7rem;
  font:600 .58rem/1 var(--clx-font-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius-pill);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  color:var(--clx-fg-muted);
}

.clx-badge-new1085 {
  color:var(--clx-success);
  border-color:rgba(55,214,144,.5);
  background:linear-gradient(135deg,rgba(55,214,144,.18),rgba(55,214,144,.07));
}

.clx-card-bottom1086,
.clx-asset-bottom1131 {
  display:flex;
  justify-content:flex-end;
  gap:.45rem;
  flex-wrap:wrap;
}

.clx-mini-stat1087,
.clx-asset-stat1143 {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.4rem .65rem;
  font:600 .58rem/1 var(--clx-font-sans);
  letter-spacing:.08em;
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius-pill);
  color:var(--clx-fg-muted);
}

.clx-featured-mark1089 {
  position:absolute;
  top:.7rem;
  right:.7rem;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(var(--clx-accent-rgb),.25),rgba(var(--clx-accent-rgb),.05));
  border:1px solid rgba(var(--clx-accent-rgb),.55);
  color:var(--clx-accent);
  font-size:.95rem;
  z-index:3;
  box-shadow:0 6px 22px -6px rgba(var(--clx-accent-rgb),.55);
}

.clx-featured-body1090 {
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:1rem 1rem 1.15rem;
  flex:1;
}

.clx-featured-title1091,
.clx-asset-title1136 {
  margin:0;
  font:700 .95rem/1.3 var(--clx-font-sans);
  letter-spacing:.2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.clx-featured-link1092,
.clx-asset-title-link1137 {
  color:var(--clx-fg);
  text-decoration:none;
  transition:color .4s var(--clx-ease-out);
}

.clx-featured-link1092:hover,
.clx-asset-title-link1137:hover { color:var(--clx-accent); }

.clx-featured-author1093,
.clx-asset-author1138 {
  display:flex;
  align-items:center;
  gap:.75rem;
}

.clx-author-avatar1094,
.clx-asset-author-img1139 {
  width:42px;
  height:42px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--clx-bg-soft);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.55);
}

.clx-author-meta1095 {
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.clx-author-name1096,
.clx-asset-author-name1140 {
  color:var(--clx-fg-dim);
  font:600 .7rem/1 var(--clx-font-sans);
  text-transform:uppercase;
  letter-spacing:.15em;
  text-decoration:none;
  transition:color .4s var(--clx-ease-out);
}

.clx-author-name1096:hover,
.clx-asset-author-name1140:hover { color:var(--clx-accent); }

.clx-author-role1097 {
  font:600 .52rem/1 var(--clx-font-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
}

.clx-featured-excerpt1098,
.clx-asset-excerpt1141 {
  margin:0;
  font-size:.74rem;
  line-height:1.5;
  color:var(--clx-fg-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.clx-featured-meta1099 {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  font:600 .55rem/1 var(--clx-font-sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
}

/* -------------------------------------------------------------------------- */
/* RESULTS HEADER + TAGS                                                      */
/* -------------------------------------------------------------------------- */
.clx-results-head1110 {
  background:linear-gradient(180deg,var(--clx-bg),transparent 85%);
  padding:1.2rem 0 1.6rem;
}

.clx-results-inner1111 {
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

.clx-results-info1112 {
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.clx-results-title1113 {
  margin:0;
  font:700 .78rem/1 var(--clx-font-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
}

.clx-results-sub1114 {
  margin:0;
  font-size:.86rem;
  color:var(--clx-fg-dim);
  font-weight:500;
}

.clx-tags-bar1115 {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem .75rem;
  align-items:center;
}

.clx-tags-label1116 {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font:600 .58rem/1 var(--clx-font-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
}

.clx-tag-list1118 {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

.clx-tag-chip1119 {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem .85rem;
  font:600 .6rem/1 var(--clx-font-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:var(--clx-radius-pill);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  border:1px solid var(--clx-border);
  color:var(--clx-fg-dim);
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:.45s var(--clx-ease-out);
}

.clx-tag-chip1119:hover {
  color:var(--clx-fg);
  border-color:rgba(var(--clx-accent-rgb),.55);
  transform:translateY(-3px);
  box-shadow:0 10px 26px -8px rgba(var(--clx-accent-rgb),.45);
}

/* -------------------------------------------------------------------------- */
/* GRID + CARDS                                                               */
/* -------------------------------------------------------------------------- */
.clx-grid-section1120 { padding: .6rem 0 3.6rem; }

.clx-asset-grid1121 {
  display:grid;
  gap:1.15rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  align-items:stretch;
}

.clx-asset-card1122 {
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg,var(--clx-bg-soft),var(--clx-bg-alt));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius-xl);
  overflow:hidden;
  position:relative;
  box-shadow:var(--clx-shadow-sm);
  transition:.65s var(--clx-ease);
  isolation:isolate;
}

.clx-asset-card1122:hover {
  transform:translateY(-8px);
  border-color:rgba(var(--clx-accent-rgb),.55);
  box-shadow:var(--clx-shadow);
}

.clx-asset-media1123 {
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
}

.clx-asset-overlay1126 {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:.75rem .7rem .65rem;
  opacity:0;
  background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.55));
  transition:.6s var(--clx-ease-out);
}

.clx-asset-card1122:hover .clx-asset-overlay1126 { opacity:1; }

.clx-asset-quick1132 {
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
}

.clx-btn-soft-sm1133 {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .8rem;
  font:600 .58rem/1 var(--clx-font-sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  border:1px solid var(--clx-border);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  color:var(--clx-fg-dim);
  border-radius:var(--clx-radius);
  cursor:pointer;
  text-decoration:none;
  transition:.4s var(--clx-ease-out);
}

.clx-btn-soft-sm1133:hover {
  color:var(--clx-fg);
  border-color:rgba(var(--clx-accent-rgb),.55);
  transform:translateY(-3px);
}

.clx-asset-body1134 {
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:.95rem .95rem 1.1rem;
  flex:1;
}

.clx-asset-stats1142 {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
  font:600 .58rem/1 var(--clx-font-sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
}

.clx-asset-cat1145 {
  padding:.4rem .65rem;
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius-pill);
  font:600 .55rem/1 var(--clx-font-sans);
  letter-spacing:.18em;
}

.clx-asset-tags1146 {
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}

.clx-tag-mini1147,
.clx-tag-more1148 {
  padding:.4rem .65rem;
  border:1px solid var(--clx-border);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  font:600 .52rem/1 var(--clx-font-sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
  border-radius:var(--clx-radius-pill);
}

.clx-tag-more1148 {
  background:linear-gradient(135deg,rgba(var(--clx-accent-rgb),.15),rgba(var(--clx-accent-rgb),.05));
  border-color:rgba(var(--clx-accent-rgb),.5);
  color:var(--clx-accent);
}

.clx-asset-actions1149 {
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-top:auto;
}

/* -------------------------------------------------------------------------- */
/* EMPTY STATE                                                                */
/* -------------------------------------------------------------------------- */
.clx-empty1153 {
  margin:3rem auto 1rem;
  max-width:560px;
  text-align:center;
  background:linear-gradient(145deg,var(--clx-bg-soft),var(--clx-bg-alt));
  border:1px dashed var(--clx-border);
  padding:2.6rem 2.2rem 2.7rem;
  border-radius:var(--clx-radius-xl);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  position:relative;
  overflow:hidden;
  box-shadow:var(--clx-shadow-sm);
}

.clx-empty1153:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 80% 25%,rgba(var(--clx-accent-rgb),.3),transparent 70%);
  opacity:.4;
  pointer-events:none;
}

.clx-empty-icon-wrap1154 {
  width:74px;
  height:74px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(var(--clx-accent-rgb),.18),rgba(var(--clx-accent-rgb),.06));
  border:1px solid rgba(var(--clx-accent-rgb),.45);
  margin:0 auto;
  color:var(--clx-accent);
  font-size:1.7rem;
  box-shadow:0 6px 24px -6px rgba(var(--clx-accent-rgb),.55);
}

.clx-empty-title1156 {
  margin:0;
  font:700 1.4rem/1.2 var(--clx-font-sans);
  background:var(--clx-grad-accent);
  -webkit-background-clip:text;
  color:transparent;
}

.clx-empty-text1157 {
  margin:0;
  font-size:.92rem;
  line-height:1.55;
  color:var(--clx-fg-dim);
}

.clx-empty-actions1158 {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  margin-top:.35rem;
}

/* -------------------------------------------------------------------------- */
/* PAGINATION                                                                 */
/* -------------------------------------------------------------------------- */
.clx-pagination1160 {
  margin:2.4rem 0 0;
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:center;
}

.clx-page-list1161 {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

.clx-page-btn1163 {
  min-width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--clx-border);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  color:var(--clx-fg-dim);
  text-decoration:none;
  font:600 .66rem/1 var(--clx-font-sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  border-radius:var(--clx-radius-lg);
  position:relative;
  overflow:hidden;
  transition:.45s var(--clx-ease-out);
}

.clx-page-btn1163:hover {
  color:var(--clx-fg);
  border-color:rgba(var(--clx-accent-rgb),.55);
  transform:translateY(-3px);
}

.clx-page-active1164 {
  background:linear-gradient(135deg,rgba(var(--clx-accent-rgb),.25),rgba(var(--clx-accent-rgb),.08));
  color:var(--clx-accent);
  border-color:rgba(var(--clx-accent-rgb),.6);
  box-shadow:0 0 0 1px rgba(var(--clx-accent-rgb),.45);
  cursor:default;
}

.clx-page-ellipsis1165 {
  display:grid;
  place-items:center;
  min-width:46px;
  height:46px;
  color:var(--clx-fg-muted);
  font-size:1.1rem;
}

.clx-page-info1166 {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--clx-fg-muted);
}

/* -------------------------------------------------------------------------- */
/* TOASTS + MODAL + SCROLL TOP                                                */
/* -------------------------------------------------------------------------- */
.clx-toast-host1167 {
  position:fixed;
  top:1rem;
  right:1rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  z-index:1200;
}

.clx-toast-host1167 .clx-toast {
  padding:.85rem 1rem;
  background:linear-gradient(135deg,var(--clx-bg-soft),var(--clx-bg-alt));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius-lg);
  font-size:.85rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.55rem;
  color:var(--clx-fg);
  box-shadow:var(--clx-shadow-sm);
  animation:clxFadeIn var(--clx-speed-fast) var(--clx-ease-out);
}

.clx-modal1168 {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:1500;
  padding:2rem 1.2rem;
}

.clx-modal1168[aria-hidden="false"] { display:flex; }

.clx-modal-dialog1170 {
  width:min(880px,100%);
  max-height:85vh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg,var(--clx-bg-soft),var(--clx-bg-alt));
  border:1px solid var(--clx-border);
  border-radius:var(--clx-radius-xl);
  box-shadow:var(--clx-shadow);
  overflow:hidden;
  animation:clxScaleIn var(--clx-speed-fast) var(--clx-ease-out);
}

.clx-modal-head1171 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 1.2rem;
  border-bottom:1px solid var(--clx-border);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
}

.clx-modal-title1172 {
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.2px;
}

.clx-modal-close1173 {
  width:44px;
  height:44px;
  border:1px solid var(--clx-border);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  color:var(--clx-fg-dim);
  border-radius:var(--clx-radius);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:.45s var(--clx-ease-out);
}

.clx-modal-close1173:hover {
  color:var(--clx-fg);
  border-color:rgba(var(--clx-accent-rgb),.6);
  transform:translateY(-3px);
}

.clx-modal-body1174 {
  padding:1.25rem 1.2rem 1.35rem;
  overflow:auto;
  scrollbar-width:thin;
}

.clx-modal-body1174::-webkit-scrollbar { width:10px; }
.clx-modal-body1174::-webkit-scrollbar-thumb {
  background:var(--clx-bg-soft);
  border-radius:12px;
  border:2px solid var(--clx-bg-alt);
}

.clx-modal-foot1175 {
  padding:.95rem 1.2rem 1.15rem;
  border-top:1px solid var(--clx-border);
  background:linear-gradient(135deg,var(--clx-glass-a),var(--clx-glass-b));
  display:flex;
  justify-content:flex-end;
  gap:.75rem;
}

.clx-scroll-top1176 {
  position:fixed;
  right:1.2rem;
  bottom:1.2rem;
  width:52px;
  height:52px;
  border:1px solid var(--clx-border);
  background:var(--clx-grad-accent);
  color:#141b2b;
  border-radius:var(--clx-radius-lg);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 32px -10px rgba(var(--clx-accent-rgb),.6);
  font-size:1rem;
  font-weight:600;
  transition:.55s var(--clx-ease-out);
  z-index:1100;
}

.clx-scroll-top1176:hover {
  transform:translateY(-6px);
  box-shadow:0 14px 40px -10px rgba(var(--clx-accent-rgb),.7);
}

/* -------------------------------------------------------------------------- */
/* FOCUS / ACCESSIBILITY                                                      */
/* -------------------------------------------------------------------------- */
.clx-page-root1001 :focus-visible {
  outline:2px solid rgba(var(--clx-accent-rgb),.75);
  outline-offset:2px;
  box-shadow:var(--clx-shadow-focus);
}

@media (prefers-reduced-motion:reduce) {
  .clx-page-root1001 * {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* ANIMATIONS                                                                 */
/* -------------------------------------------------------------------------- */
@keyframes clxFadeIn {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes clxScaleIn {
  from { opacity:0; transform:scale(.92); }
  to { opacity:1; transform:scale(1); }
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .clx-hero-inner1008 { flex-direction:column; }
  .clx-search-card1035 { max-width:100%; }
  .clx-hero1002 { padding:4.4rem 0 3rem; }
}

@media (max-width: 860px) {
  .clx-asset-grid1121 { gap:.95rem; }
  .clx-featured-card1072,
  .clx-asset-card1122 { border-radius:var(--clx-radius-lg); }
  .clx-hero-title1012 { font-size:clamp(2rem,7vw,3.1rem); }
}

@media (max-width: 640px) {
  .clx-hero1002 { padding:3.6rem 0 2.4rem; }
  .clx-filter-grid1048 { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
  .clx-search-row1041 { flex-direction:column; }
  .clx-asset-grid1121 { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  .clx-stats { flex-direction:column; }
  .clx-stat1016,
  .clx-stat1020,
  .clx-stat1024 { min-width:unset; flex:1 1 100%; }
}

@media (max-width: 460px) {
  .clx-asset-grid1121 { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .clx-search-card1035 { padding:1.3rem 1.2rem 1.5rem; }
  .clx-filter-grid1048 { gap:.75rem; }
  .clx-scroll-top1176 { width:48px; height:48px; }
}

/* -------------------------------------------------------------------------- */
/* LIGHT THEME TWEAKS                                                         */
/* -------------------------------------------------------------------------- */
[data-theme="light"] .clx-featured-card1072,
[data-theme="light"] .clx-asset-card1122,
[data-theme="light"] .clx-search-card1035,
[data-theme="light"] .clx-empty1153 {
  background:linear-gradient(145deg,var(--clx-bg-alt),var(--clx-bg-soft));
  border-color:var(--clx-border);
}

[data-theme="light"] .clx-featured-overlay1075,
[data-theme="light"] .clx-asset-overlay1126 {
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(0,0,0,.35));
}

/* -------------------------------------------------------------------------- */
/* PRINT                                                                      */
/* -------------------------------------------------------------------------- */
@media print {
  .clx-hero1002,
  .clx-featured1063,
  .clx-scroll-top1176,
  .clx-toast-host1167,
  .clx-modal1168 { box-shadow:none !important; background:#fff !important; }
  .clx-featured-overlay1075,
  .clx-asset-overlay1126 { display:none !important; }
}

.clx-featured-wide2001, .clx-grid-wide2002 { width:100%; margin-inline:0; }
.clx-featured-wide2001 { padding:0 clamp(.75rem,4vw,3.5rem) 2.8rem; }
.clx-grid-wide2002 { padding:0 clamp(.75rem,3.5vw,2.8rem) 4rem; }
@media (max-width:1080px){
  .clx-featured-wide2001 { padding:0 1.25rem 2.2rem; }
  .clx-grid-wide2002 { padding:0 1.25rem 3rem; }
}
@media (max-width:640px){
  .clx-featured-wide2001 { padding:0 .9rem 1.8rem; }
  .clx-grid-wide2002 { padding:0 .9rem 2.4rem; }
}