.cat-page{ padding: 22px 0 46px; }

.cat-hero{
  padding: 18px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: stretch;
}

.cat-hero-left{ padding: 10px; }
.cat-title{
  margin: 12px 0 6px;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.12;
}
.cat-sub{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.5;
}

.cat-search{ margin-top: 14px; }
.cat-search input{
  width: 100%;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 14px;
  outline: none;
  font-size: 14.5px;
}
.cat-search input::placeholder{ color: rgba(233,238,252,.40); }
.cat-search input:focus{
  border-color: rgba(255,255,255,.22);
  background: rgba(0,0,0,.26);
}

.cat-hero-right{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.cat-orb{
  position:absolute; inset:-60px -80px auto auto;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 55%),
              radial-gradient(circle at 60% 40%, rgba(116,122,255,.55), transparent 60%),
              radial-gradient(circle at 40% 70%, rgba(62,224,192,.45), transparent 60%);
  filter: blur(2px);
  opacity: .9;
}
.cat-orb2{
  position:absolute; inset:auto auto -80px -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 58%),
              radial-gradient(circle at 60% 50%, rgba(255,178,85,.30), transparent 65%),
              radial-gradient(circle at 40% 70%, rgba(62,224,192,.25), transparent 60%);
  opacity: .8;
  filter: blur(3px);
}

.cat-mini{
  position:absolute;
  left: 14px; right:14px; bottom: 14px;
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,15,25,.55);
  backdrop-filter: blur(12px);
  display:grid;
  gap: 10px;
}
.mini-row{
  display:flex; gap:10px; align-items:center;
}
.mini-ic{
  width: 36px; height: 36px;
  display:grid; place-items:center;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.mini-title{ font-weight: 900; }
.mini-sub{ color: var(--muted); font-weight: 700; font-size: 12.5px; }

.cat-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin: 18px 0 12px;
  gap: 12px;
}
.cat-head h2{
  margin:0;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.cat-meta{
  color: var(--muted);
  font-size: 13px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:8px 12px;
  border-radius: 999px;
}

.cat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cat-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  position:relative;
  overflow:hidden;
}
.cat-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

.cat-top{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
}
.cat-icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-size: 20px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.cat-name{
  margin: 10px 0 6px;
  font-weight: 950;
  letter-spacing: -0.2px;
}
.cat-desc{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cat-chip{
  display:inline-flex; align-items:center; gap: 6px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 800;
  font-size: 12.5px;
}

.cat-glow{
  position:absolute; inset:-40px -60px auto auto;
  width: 180px; height: 180px; border-radius: 50%;
  filter: blur(22px);
  opacity: .45;
}

/* accents */
.a1 .cat-glow{ background: rgba(116,122,255,.55); }
.a2 .cat-glow{ background: rgba(62,224,192,.55); }
.a3 .cat-glow{ background: rgba(255,178,85,.45); }
.a4 .cat-glow{ background: rgba(116,122,255,.40); }
.a5 .cat-glow{ background: rgba(62,224,192,.40); }
.a6 .cat-glow{ background: rgba(255,178,85,.35); }
.a7 .cat-glow{ background: rgba(116,122,255,.50); }
.a8 .cat-glow{ background: rgba(62,224,192,.50); }
.a9 .cat-glow{ background: rgba(255,178,85,.40); }
.a10 .cat-glow{ background: rgba(116,122,255,.35); }
.a11 .cat-glow{ background: rgba(62,224,192,.35); }
.a12 .cat-glow{ background: rgba(255,178,85,.30); }
.a13 .cat-glow{ background: rgba(116,122,255,.42); }
.a14 .cat-glow{ background: rgba(62,224,192,.42); }
.a15 .cat-glow{ background: rgba(255,178,85,.34); }
.a16 .cat-glow{ background: rgba(116,122,255,.30); }
.a17 .cat-glow{ background: rgba(62,224,192,.30); }
.a18 .cat-glow{ background: rgba(255,178,85,.26); }
.a19 .cat-glow{ background: rgba(116,122,255,.26); }
.a20 .cat-glow{ background: rgba(62,224,192,.26); }
.a21 .cat-glow{ background: rgba(255,178,85,.22); }
.a22 .cat-glow{ background: rgba(116,122,255,.22); }
.a23 .cat-glow{ background: rgba(62,224,192,.22); }
.a24 .cat-glow{ background: rgba(255,178,85,.20); }
.a25 .cat-glow{ background: rgba(116,122,255,.18); }
.a26 .cat-glow{ background: rgba(62,224,192,.18); }
.a27 .cat-glow{ background: rgba(255,178,85,.18); }
.a28 .cat-glow{ background: rgba(116,122,255,.16); }
.a29 .cat-glow{ background: rgba(62,224,192,.16); }
.a30 .cat-glow{ background: rgba(255,178,85,.16); }
.a31 .cat-glow{ background: rgba(116,122,255,.14); }
.a32 .cat-glow{ background: rgba(62,224,192,.14); }

@media (max-width: 980px){
  .cat-hero{ grid-template-columns: 1fr; }
  .cat-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .cat-grid{ grid-template-columns: 1fr; }
}