/* =========================================================
   OSANIME CATEGORY — STAGE 8 UI/UX
   Page-scoped polish only. Query/cache behavior stays Stage 7.
   ========================================================= */
body.category-page.category-php-page.category-stage8-page{
  --cat-bg:#050914;
  --cat-panel:#0a1325;
  --cat-panel-2:#0e1a2f;
  --cat-line:rgba(255,255,255,.085);
  --cat-line-strong:rgba(255,255,255,.13);
  --cat-text:#f7f9fd;
  --cat-muted:#98a7ba;
  --cat-muted-2:#cbd4e2;
  --cat-pink:var(--pink,#ff4f93);
  --cat-pink-soft:rgba(255,79,147,.10);
  --cat-radius:14px;
  background:var(--cat-bg);
}

body.category-page.category-php-page.category-stage8-page .category-root{
  background:
    radial-gradient(circle at 8% 16%,rgba(255,79,147,.055),transparent 26%),
    linear-gradient(180deg,#07101f 0,#040813 100%);
}

/* ---------- Hero ---------- */
body.category-page.category-php-page.category-stage8-page .category-hero{
  position:relative;
  isolation:isolate;
  min-height:196px;
  padding:0;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,8,20,.98) 0%,rgba(4,8,20,.89) 44%,rgba(4,8,20,.36) 100%),
    var(--osanime-bg-osnh) center 42%/cover no-repeat;
}
body.category-page.category-php-page.category-stage8-page .category-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 76% 24%,rgba(255,79,147,.16),transparent 28%),
    linear-gradient(180deg,transparent 58%,rgba(5,9,20,.42));
  pointer-events:none;
}
body.category-page.category-php-page.category-stage8-page .category-hero-inner{
  width:min(1460px,100%);
  min-height:196px;
  margin:0 auto;
  padding:28px clamp(20px,3vw,42px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.category-page.category-php-page.category-stage8-page .breadcrumb{
  margin:0 0 14px;
  gap:9px;
  min-width:0;
  color:var(--cat-muted-2);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
}
body.category-page.category-php-page.category-stage8-page .breadcrumb a,
body.category-page.category-php-page.category-stage8-page .breadcrumb b{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.category-page.category-php-page.category-stage8-page .category-hero-copy{
  max-width:620px;
}
body.category-page.category-php-page.category-stage8-page .category-hero h1{
  margin:0;
  font-size:clamp(28px,3vw,42px);
  letter-spacing:-.8px;
  line-height:1.08;
  text-wrap:balance;
}
body.category-page.category-php-page.category-stage8-page .category-hero p{
  width:min(560px,100%);
  margin:10px 0 0;
  color:#d7deea;
  font-size:13px;
  line-height:1.65;
}
body.category-page.category-php-page.category-stage8-page .category-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:17px;
}
body.category-page.category-php-page.category-stage8-page .category-hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(7,14,28,.62);
  color:#dce5f2;
  backdrop-filter:blur(8px);
  font-size:10px;
  font-weight:800;
}
body.category-page.category-php-page.category-stage8-page .category-hero-meta i{
  color:var(--cat-pink);
}

/* ---------- Main shell ---------- */
body.category-page.category-php-page.category-stage8-page .category-content{
  width:min(1460px,100%);
  margin:0 auto;
  padding:24px clamp(16px,2.5vw,36px) 32px;
  grid-template-columns:minmax(0,1fr) 286px;
  gap:24px;
  background:transparent;
}
body.category-page.category-php-page.category-stage8-page .section-head{
  margin-bottom:13px;
}
body.category-page.category-php-page.category-stage8-page .section-head h2,
body.category-page.category-php-page.category-stage8-page .cat-side-card h3{
  border-left:0;
  padding-left:0;
  font-size:13px;
  letter-spacing:.08em;
  line-height:1.25;
}
body.category-page.category-php-page.category-stage8-page .section-head h2::before,
body.category-page.category-php-page.category-stage8-page .cat-side-card h3::before{
  content:"";
  display:inline-block;
  width:3px;
  height:14px;
  margin-right:8px;
  border-radius:999px;
  vertical-align:-2px;
  background:var(--cat-pink);
}
body.category-page.category-php-page.category-stage8-page .category-total-pill,
body.category-page.category-php-page.category-stage8-page .category-result-count{
  min-height:26px;
  border-color:rgba(255,79,147,.20);
  background:rgba(255,79,147,.075);
  color:#ff9fc6;
  font-size:9.5px;
}

/* ---------- Category selector ---------- */
body.category-page.category-php-page.category-stage8-page .category-grid{
  grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:10px;
  margin-bottom:30px;
}
body.category-page.category-php-page.category-stage8-page .category-card{
  min-height:118px;
  padding:15px 10px 13px;
  gap:9px;
  border-radius:12px;
  border-color:var(--cat-line);
  background:
    linear-gradient(180deg,rgba(16,28,50,.96),rgba(8,16,32,.96));
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  transform:none;
}
body.category-page.category-php-page.category-stage8-page .category-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,79,147,.34);
  background:linear-gradient(180deg,rgba(20,33,57,.98),rgba(10,18,35,.98));
}
body.category-page.category-php-page.category-stage8-page .category-card.active{
  border-color:rgba(255,79,147,.58);
  background:
    radial-gradient(circle at 50% 0,rgba(255,79,147,.14),transparent 55%),
    linear-gradient(180deg,#111c32,#091225);
  box-shadow:0 0 0 1px rgba(255,79,147,.08),0 14px 32px rgba(255,79,147,.09);
}
body.category-page.category-php-page.category-stage8-page .category-card::after{
  left:22px;
  right:22px;
  height:2px;
}
body.category-page.category-php-page.category-stage8-page .cat-icon{
  width:46px;
  height:46px;
  font-size:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
body.category-page.category-php-page.category-stage8-page .category-card b{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f7f9fc;
  font-size:11.5px;
}
body.category-page.category-php-page.category-stage8-page .category-card small{
  color:var(--cat-muted);
  font-size:9.5px;
}

/* ---------- List heading + sort ---------- */
body.category-page.category-php-page.category-stage8-page .category-list-head{
  padding-top:2px;
  align-items:flex-end;
}
body.category-page.category-php-page.category-stage8-page .category-list-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:7px;
}
body.category-page.category-php-page.category-stage8-page .category-list-head .category-result-count{
  margin-top:0;
}
body.category-page.category-php-page.category-stage8-page .category-reset-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:0 9px;
  border:1px solid var(--cat-line);
  border-radius:999px;
  color:var(--cat-muted-2);
  background:#0a1427;
  font-size:9.5px;
  font-weight:800;
  transition:.18s ease;
}
body.category-page.category-php-page.category-stage8-page .category-reset-link:hover{
  color:#fff;
  border-color:rgba(255,79,147,.30);
  background:var(--cat-pink-soft);
}
body.category-page.category-php-page.category-stage8-page .category-sort-native{
  min-width:205px;
}
body.category-page.category-php-page.category-stage8-page .category-sort-btn{
  min-height:42px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--cat-line);
  border-radius:10px;
  background:#0b1529;
  color:#edf2f9;
  cursor:pointer;
  font-size:10.5px;
  font-weight:800;
  transition:.18s ease;
}
body.category-page.category-php-page.category-stage8-page .category-sort-btn:hover,
body.category-page.category-php-page.category-stage8-page .category-sort-native[open] .category-sort-btn{
  border-color:rgba(255,79,147,.34);
  background:#0f1a30;
}
body.category-page.category-php-page.category-stage8-page .category-sort-current{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
body.category-page.category-php-page.category-stage8-page .category-sort-current i{
  color:var(--cat-pink);
}
body.category-page.category-php-page.category-stage8-page .category-sort-chevron{
  transition:transform .18s ease;
}
body.category-page.category-php-page.category-stage8-page .category-sort-native[open] > .category-sort-btn .category-sort-chevron{
  transform:rotate(180deg);
}
body.category-page.category-php-page.category-stage8-page .category-sort-menu{
  top:calc(100% + 8px);
  right:0;
  width:245px;
  padding:7px;
  border:1px solid var(--cat-line-strong);
  border-radius:12px;
  background:#091326;
  box-shadow:0 22px 55px rgba(0,0,0,.40);
  overflow:hidden;
}
body.category-page.category-php-page.category-stage8-page .category-sort-menu a{
  min-height:50px;
  padding:8px 9px;
  border-radius:8px;
}
body.category-page.category-php-page.category-stage8-page .category-sort-menu a:hover,
body.category-page.category-php-page.category-stage8-page .category-sort-menu a.active{
  background:rgba(255,79,147,.09);
}
body.category-page.category-php-page.category-stage8-page .category-sort-menu a > i{
  width:22px;
  text-align:center;
  color:#ff83b6;
}
body.category-page.category-php-page.category-stage8-page .category-sort-menu a small{
  color:var(--cat-muted);
}

/* ---------- Music table ---------- */
body.category-page.category-php-page.category-stage8-page .category-table{
  border-color:var(--cat-line);
  border-radius:13px;
  background:rgba(7,14,28,.62);
  box-shadow:0 14px 38px rgba(0,0,0,.14);
}
body.category-page.category-php-page.category-stage8-page .category-table-head,
body.category-page.category-php-page.category-stage8-page .category-song-row{
  grid-template-columns:38px minmax(280px,1.75fr) minmax(110px,.66fr) minmax(120px,.72fr) 72px 96px 38px !important;
  gap:12px !important;
}
body.category-page.category-php-page.category-stage8-page .category-table-head{
  height:42px;
  padding:0 14px;
  background:rgba(255,255,255,.018);
  color:#8796aa;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
body.category-page.category-php-page.category-stage8-page .category-song-row{
  min-height:80px;
  padding:10px 14px;
  content-visibility:auto;
  contain-intrinsic-size:80px;
}
body.category-page.category-php-page.category-stage8-page .category-song-row:hover{
  background:rgba(255,255,255,.024);
}
body.category-page.category-php-page.category-stage8-page .cat-rank{
  width:25px;
  height:25px;
  border-radius:7px;
  background:#111d32;
  font-size:10px;
}
body.category-page.category-php-page.category-stage8-page .cat-song-title{
  grid-template-columns:64px minmax(0,1fr);
  gap:11px;
}
body.category-page.category-php-page.category-stage8-page .cat-song-title img{
  width:64px;
  height:56px;
  border-radius:9px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.06);
}
body.category-page.category-php-page.category-stage8-page .cat-song-title b{
  color:#f5f7fb;
  font-size:11.5px;
  line-height:1.4;
}
body.category-page.category-php-page.category-stage8-page .cat-primary-meta{
  margin-top:4px;
  color:#8998ac;
  font-size:9.5px;
}
body.category-page.category-php-page.category-stage8-page .cat-mobile-meta{
  display:none;
}
body.category-page.category-php-page.category-stage8-page .cat-artist,
body.category-page.category-php-page.category-stage8-page .cat-album,
body.category-page.category-php-page.category-stage8-page .cat-time{
  color:#aeb9c8;
  font-size:10.5px;
}
body.category-page.category-php-page.category-stage8-page .cat-badge{
  min-width:45px;
  min-height:23px;
  padding:0 7px;
  border-radius:7px;
  border-color:rgba(255,255,255,.075);
  background:#101a2d;
  color:#d5deeb;
  font-size:8.5px;
}
body.category-page.category-php-page.category-stage8-page .cat-actions a{
  width:31px;
  height:31px;
  border-radius:9px;
  font-size:11px;
}

/* ---------- Empty/error ---------- */
body.category-page.category-php-page.category-stage8-page .category-empty-table,
body.category-page.category-php-page.category-stage8-page .category-error{
  min-height:210px;
  padding:28px 18px;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,79,147,.07),transparent 58%),
    #091326;
}
body.category-page.category-php-page.category-stage8-page .category-empty-table i,
body.category-page.category-php-page.category-stage8-page .category-error i{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,79,147,.09);
  font-size:20px;
}

/* ---------- Hybrid cursor + numeric pagination ---------- */
body.category-page.category-php-page.category-stage8-page .category-pagination{
  display:grid;
  grid-template-columns:minmax(112px,1fr) auto minmax(112px,1fr);
  align-items:center;
  gap:12px;
  padding:18px 0 0;
}
body.category-page.category-php-page.category-stage8-page .category-pagination-edge{
  min-width:0;
  display:flex;
  align-items:center;
}
body.category-page.category-php-page.category-stage8-page .category-pagination-edge-left{justify-content:flex-start}
body.category-page.category-php-page.category-stage8-page .category-pagination-edge-right{justify-content:flex-end}
body.category-page.category-php-page.category-stage8-page .category-pagination .category-page-btn{
  width:max-content;
  min-width:116px;
  height:38px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:10px;
  border:1px solid var(--cat-line);
  background:#091326;
  color:#dce4ef;
  font-size:10px;
  font-weight:800;
  transition:.18s ease;
}
body.category-page.category-php-page.category-stage8-page .category-pagination .category-page-btn:hover{
  border-color:rgba(255,79,147,.35);
  background:rgba(255,79,147,.10);
  color:#fff;
}
body.category-page.category-php-page.category-stage8-page .category-page-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
}
body.category-page.category-php-page.category-stage8-page .category-page-number{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
  border-radius:10px;
  border:1px solid var(--cat-line);
  background:#091326;
  color:#cfd8e6;
  font-size:10px;
  font-weight:900;
  line-height:1;
  transition:.18s ease;
}
body.category-page.category-php-page.category-stage8-page a.category-page-number:hover{
  border-color:rgba(255,79,147,.38);
  background:rgba(255,79,147,.10);
  color:#fff;
  transform:translateY(-1px);
}
body.category-page.category-php-page.category-stage8-page .category-page-number.current{
  border-color:rgba(255,79,147,.48);
  background:linear-gradient(135deg,rgba(255,79,147,.20),rgba(132,92,246,.20));
  color:#ffafd0;
  box-shadow:0 0 0 1px rgba(255,79,147,.05) inset;
}
body.category-page.category-php-page.category-stage8-page .category-page-ellipsis{
  min-width:18px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#77859b;
  font-size:12px;
  font-weight:900;
}
body.category-page.category-php-page.category-stage8-page .category-page-summary{
  padding-top:8px;
  text-align:center;
  color:#6f7f96;
  font-size:9px;
  font-weight:700;
}

/* ---------- Sidebar ---------- */
body.category-page.category-php-page.category-stage8-page .category-sidebar{
  gap:14px;
  top:86px;
  max-height:calc(100vh - 102px);
}
body.category-page.category-php-page.category-stage8-page .cat-side-card{
  padding:15px;
  border-radius:13px;
  border-color:var(--cat-line);
  background:linear-gradient(180deg,#0e192d,#091326);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
body.category-page.category-php-page.category-stage8-page .side-head{
  margin-bottom:7px;
}
body.category-page.category-php-page.category-stage8-page .side-head span{
  color:var(--cat-muted);
  font-size:9.5px;
}
body.category-page.category-php-page.category-stage8-page .filter-card a{
  min-height:35px;
  padding:7px 8px;
  border-radius:8px;
  font-size:10.5px;
}
body.category-page.category-php-page.category-stage8-page .filter-card a:hover,
body.category-page.category-php-page.category-stage8-page .filter-card a.active{
  background:rgba(255,79,147,.075);
}
body.category-page.category-php-page.category-stage8-page .filter-card a.active{
  color:#ff8fbd;
}
body.category-page.category-php-page.category-stage8-page .filter-card a b{
  color:#8190a4;
  font-size:9.5px;
}
body.category-page.category-php-page.category-stage8-page .popular-card h3{
  margin-bottom:10px;
}
body.category-page.category-php-page.category-stage8-page .popular-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}
body.category-page.category-php-page.category-stage8-page .popular-item{
  grid-template-columns:20px 44px minmax(0,1fr);
  gap:9px;
  min-height:58px;
  padding:6px;
  content-visibility:auto;
  contain-intrinsic-size:58px;
}
body.category-page.category-php-page.category-stage8-page .popular-item img{
  border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
}
body.category-page.category-php-page.category-stage8-page .popular-item b{
  font-size:10px;
  line-height:1.35;
}
body.category-page.category-php-page.category-stage8-page .popular-item small{
  display:block;
  margin-top:3px;
  color:#8e9db0;
  font-size:8.5px;
}
body.category-page.category-php-page.category-stage8-page .music-hitz-banner{
  min-height:104px;
  padding:17px;
  border-radius:13px;
  border-color:var(--cat-line);
}
body.category-page.category-php-page.category-stage8-page .music-hitz-banner h3{
  font-size:16px;
}
body.category-page.category-php-page.category-stage8-page .music-hitz-banner a{
  flex:0 0 auto;
  transition:.18s ease;
}
body.category-page.category-php-page.category-stage8-page .music-hitz-banner a:hover{
  transform:translateX(2px);
  box-shadow:0 8px 24px rgba(255,79,147,.25);
}

/* ---------- Tablet ---------- */
@media(max-width:1180px) and (min-width:781px){
  body.category-page.category-php-page.category-stage8-page .category-content{
    grid-template-columns:1fr !important;
    padding-inline:22px;
  }
  body.category-page.category-php-page.category-stage8-page .category-grid{
    grid-template-columns:repeat(auto-fit,minmax(116px,1fr));
  }
  body.category-page.category-php-page.category-stage8-page .category-sidebar{
    position:relative;
    top:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    max-height:none;
    overflow:visible;
    margin-top:18px;
  }
  body.category-page.category-php-page.category-stage8-page .music-hitz-banner{
    grid-column:1/-1;
  }
  body.category-page.category-php-page.category-stage8-page .category-table-head,
  body.category-page.category-php-page.category-stage8-page .category-song-row{
    grid-template-columns:34px minmax(250px,1.6fr) minmax(100px,.65fr) minmax(100px,.65fr) 62px 86px 34px !important;
    gap:9px !important;
  }
  body.category-page.category-php-page.category-stage8-page .cat-song-title{
    grid-template-columns:58px minmax(0,1fr);
  }
  body.category-page.category-php-page.category-stage8-page .cat-song-title img{
    width:58px;
    height:52px;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:780px){
  body.category-page.category-php-page.category-stage8-page .category-hero{
    min-height:166px;
    background-position:64% top;
  }
  body.category-page.category-php-page.category-stage8-page .category-hero-inner{
    min-height:166px;
    padding:18px 14px;
  }
  body.category-page.category-php-page.category-stage8-page .breadcrumb{
    margin-bottom:10px;
    font-size:9.5px;
  }
  body.category-page.category-php-page.category-stage8-page .category-hero h1{
    font-size:25px;
    letter-spacing:-.45px;
  }
  body.category-page.category-php-page.category-stage8-page .category-hero p{
    max-width:310px;
    margin-top:7px;
    font-size:11px;
    line-height:1.5;
  }
  body.category-page.category-php-page.category-stage8-page .category-hero-meta{
    margin-top:12px;
    gap:6px;
  }
  body.category-page.category-php-page.category-stage8-page .category-hero-meta span{
    min-height:27px;
    padding:0 8px;
    font-size:8.5px;
  }
  body.category-page.category-php-page.category-stage8-page .category-content{
    padding:15px 11px 24px !important;
  }
  body.category-page.category-php-page.category-stage8-page .section-head{
    margin-bottom:10px;
  }
  body.category-page.category-php-page.category-stage8-page .section-head h2,
  body.category-page.category-php-page.category-stage8-page .cat-side-card h3{
    font-size:11px;
  }
  body.category-page.category-php-page.category-stage8-page .category-total-pill{
    font-size:8.5px;
  }

  body.category-page.category-php-page.category-stage8-page .category-grid{
    display:flex;
    gap:8px;
    margin:0 -11px 20px;
    padding:0 11px 8px;
    overflow-x:auto;
    scroll-padding-inline:11px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  body.category-page.category-php-page.category-stage8-page .category-grid::-webkit-scrollbar{display:none}
  body.category-page.category-php-page.category-stage8-page .category-card{
    flex:0 0 108px;
    min-width:108px;
    min-height:92px;
    padding:11px 8px 10px;
    gap:6px;
    scroll-snap-align:start;
    border-radius:11px;
  }
  body.category-page.category-php-page.category-stage8-page .cat-icon{
    width:38px;
    height:38px;
    font-size:15px;
  }
  body.category-page.category-php-page.category-stage8-page .category-card b{
    font-size:9.5px;
  }
  body.category-page.category-php-page.category-stage8-page .category-card small{
    font-size:8px;
  }

  body.category-page.category-php-page.category-stage8-page .category-list-head{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:9px;
    align-items:stretch;
  }
  body.category-page.category-php-page.category-stage8-page .category-list-meta{
    gap:6px;
    margin-top:6px;
  }
  body.category-page.category-php-page.category-stage8-page .category-result-count,
  body.category-page.category-php-page.category-stage8-page .category-reset-link{
    min-height:24px;
    font-size:8.5px;
  }
  body.category-page.category-php-page.category-stage8-page .category-sort-native{
    width:100%;
    min-width:0;
  }
  body.category-page.category-php-page.category-stage8-page .category-sort-btn{
    min-height:40px;
    border-radius:10px;
  }
  body.category-page.category-php-page.category-stage8-page .category-sort-menu{
    left:0;
    right:0;
    width:100%;
  }

  body.category-page.category-php-page.category-stage8-page .category-table{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  body.category-page.category-php-page.category-stage8-page .category-table-head{
    display:none;
  }
  body.category-page.category-php-page.category-stage8-page .category-song-row{
    grid-template-columns:25px minmax(0,1fr) 32px !important;
    gap:8px !important;
    min-height:80px;
    margin-bottom:7px;
    padding:8px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(14,25,45,.94),rgba(8,16,31,.94));
    box-shadow:0 8px 22px rgba(0,0,0,.10);
  }
  body.category-page.category-php-page.category-stage8-page .category-song-row:last-child{
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  body.category-page.category-php-page.category-stage8-page .cat-rank{
    width:22px;
    height:22px;
    font-size:9px;
  }
  body.category-page.category-php-page.category-stage8-page .cat-song-title{
    grid-template-columns:60px minmax(0,1fr) !important;
    gap:9px;
  }
  body.category-page.category-php-page.category-stage8-page .cat-song-title img{
    width:60px;
    height:58px;
    border-radius:9px;
  }
  body.category-page.category-php-page.category-stage8-page .cat-song-title b{
    font-size:10.5px;
    line-height:1.35;
    -webkit-line-clamp:2;
  }
  body.category-page.category-php-page.category-stage8-page .cat-primary-meta{
    margin-top:3px;
    font-size:8.5px;
  }
  body.category-page.category-php-page.category-stage8-page .cat-mobile-meta{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    margin-top:4px;
    color:#aeb8c7;
    font-size:8.5px;
  }
  body.category-page.category-php-page.category-stage8-page .cat-mobile-meta span:first-child{
    min-width:0;
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.category-page.category-php-page.category-stage8-page .cat-mobile-meta span:last-child{
    flex:0 0 auto;
    padding:2px 5px;
    border-radius:5px;
    background:rgba(255,255,255,.055);
    color:#cfd8e6;
  }
  body.category-page.category-php-page.category-stage8-page .cat-artist,
  body.category-page.category-php-page.category-stage8-page .cat-album,
  body.category-page.category-php-page.category-stage8-page .cat-badge,
  body.category-page.category-php-page.category-stage8-page .cat-time{
    display:none;
  }
  body.category-page.category-php-page.category-stage8-page .cat-actions a{
    width:30px;
    height:30px;
    border-radius:9px;
  }

  body.category-page.category-php-page.category-stage8-page .category-pagination{
    grid-template-columns:36px minmax(0,1fr) 36px;
    gap:6px;
    padding-top:13px;
  }
  body.category-page.category-php-page.category-stage8-page .category-pagination .category-page-btn{
    min-width:36px;
    width:36px;
    max-width:36px;
    height:36px;
    padding:0;
    gap:0;
    border-radius:10px;
    font-size:9px;
  }
  body.category-page.category-php-page.category-stage8-page .category-pagination .category-page-btn span{
    display:none;
  }
  body.category-page.category-php-page.category-stage8-page .category-page-numbers{
    justify-content:flex-start;
    gap:5px;
    overflow-x:auto;
    padding:1px 2px 4px;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  body.category-page.category-php-page.category-stage8-page .category-page-numbers::-webkit-scrollbar{display:none}
  body.category-page.category-php-page.category-stage8-page .category-page-number{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:9px;
    font-size:9px;
    scroll-snap-align:center;
  }
  body.category-page.category-php-page.category-stage8-page .category-page-ellipsis{
    min-width:15px;
    height:34px;
    font-size:10px;
  }
  body.category-page.category-php-page.category-stage8-page .category-page-summary{
    padding-top:6px;
    font-size:8px;
  }

  body.category-page.category-php-page.category-stage8-page .category-sidebar{
    display:block;
    margin-top:15px;
  }
  body.category-page.category-php-page.category-stage8-page .filter-card{
    display:none;
  }
  body.category-page.category-php-page.category-stage8-page .popular-card{
    margin:0 -11px 12px;
    padding:13px 11px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  body.category-page.category-php-page.category-stage8-page .popular-card h3{
    margin-bottom:9px;
  }
  body.category-page.category-php-page.category-stage8-page .popular-list{
    flex-direction:row;
    gap:8px;
    margin-inline:-11px;
    padding:0 11px 5px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  body.category-page.category-php-page.category-stage8-page .popular-list::-webkit-scrollbar{display:none}
  body.category-page.category-php-page.category-stage8-page .popular-item{
    flex:0 0 230px;
    grid-template-columns:20px 48px minmax(0,1fr);
    min-height:62px;
    padding:7px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:10px;
    background:#0b162a;
    scroll-snap-align:start;
  }
  body.category-page.category-php-page.category-stage8-page .popular-item img{
    width:48px;
    height:48px;
  }
  body.category-page.category-php-page.category-stage8-page .music-hitz-banner{
    display:flex;
    min-height:82px;
    margin-top:0;
    padding:14px;
    border-radius:11px;
  }
  body.category-page.category-php-page.category-stage8-page .music-hitz-banner h3{
    font-size:14px;
    margin-bottom:4px;
  }
  body.category-page.category-php-page.category-stage8-page .music-hitz-banner p{
    font-size:9px;
  }
  body.category-page.category-php-page.category-stage8-page .music-hitz-banner a{
    width:34px;
    height:34px;
  }
}

@media(max-width:390px){
  body.category-page.category-php-page.category-stage8-page .category-hero h1{font-size:23px}
  body.category-page.category-php-page.category-stage8-page .category-hero p{max-width:275px;font-size:10.5px}
  body.category-page.category-php-page.category-stage8-page .category-card{flex-basis:101px;min-width:101px}
  body.category-page.category-php-page.category-stage8-page .cat-song-title{grid-template-columns:56px minmax(0,1fr)!important}
  body.category-page.category-php-page.category-stage8-page .cat-song-title img{width:56px;height:56px}
  body.category-page.category-php-page.category-stage8-page .category-pagination{grid-template-columns:34px minmax(0,1fr) 34px;gap:5px}
  body.category-page.category-php-page.category-stage8-page .category-pagination .category-page-btn{width:34px;min-width:34px;max-width:34px;height:34px}
  body.category-page.category-php-page.category-stage8-page .category-page-number{width:32px;height:32px;flex-basis:32px}
}

@media(prefers-reduced-motion:reduce){
  body.category-page.category-php-page.category-stage8-page .category-card,
  body.category-page.category-php-page.category-stage8-page .cat-actions a,
  body.category-page.category-php-page.category-stage8-page .category-pagination a,
  body.category-page.category-php-page.category-stage8-page .music-hitz-banner a{
    transition:none!important;
    transform:none!important;
  }
}
