.page-home{
  --hp-bg:#110a18;
  --hp-bg2:#2b0f3b;
  --hp-bg3:#4d1226;
  --hp-card:#241734;
  --hp-amber:#ffb347;
  --hp-cyan:#00e5ff;
  --hp-lime:#f9f871;
  --hp-green:#34e89e;
  --hp-pink:#ff00cc;
  --hp-purple:#b967ff;
  --hp-text:#ece5f8;
  --hp-sub:#a58fbf;
  --hp-w:3px;
  --hp-shadow:8px 8px 0 rgba(0,0,0,.55);
  --hp-radius:14px;
  --hp-title:'Impact','Arial Black','Noto Sans SC',sans-serif;
  --hp-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --hp-mono:'Courier New',ui-monospace,monospace;
  background:var(--hp-bg);
  color:var(--hp-text);
  font-family:var(--hp-body);
  line-height:1.6;
  overflow-x:hidden;
}
.page-home a{
  color:inherit;
  text-decoration:none;
}
.page-home img{
  max-width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* ===== HERO ===== */
.pg-hero{
  padding:42px 20px 24px;
  background:linear-gradient(160deg,var(--hp-bg) 0%,var(--hp-bg2) 70%,var(--hp-bg3) 100%);
  border-bottom:4px solid var(--hp-pink);
  box-shadow:0 0 30px rgba(255,0,204,.25),inset 0 0 60px rgba(0,229,255,.05);
  position:relative;
}
.pg-hero__topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1200px;
  margin:0 auto 16px;
  font-family:var(--hp-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.pg-hero__batch{
  color:var(--hp-lime);
  border:2px solid var(--hp-lime);
  padding:3px 10px;
  background:rgba(249,248,113,.08);
  border-radius:4px;
}
.pg-hero__title{
  max-width:1200px;
  margin:0 auto 12px;
  font-family:var(--hp-title);
  font-size:clamp(1.9rem,5.2vw,3.8rem);
  line-height:1.08;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--hp-amber);
  -webkit-text-stroke:1px rgba(0,0,0,.4);
  text-shadow:0 0 18px rgba(255,179,71,.55),4px 4px 0 rgba(0,0,0,.6);
}
.pg-hero__lead{
  max-width:1200px;
  margin:0 auto;
  font-size:clamp(.9rem,1.4vw,1.05rem);
  color:var(--hp-text);
  border-left:4px solid var(--hp-cyan);
  padding-left:16px;
  line-height:1.7;
  max-width:800px;
}
.pg-hero__bar{
  max-width:1200px;
  margin:26px auto 0;
  display:flex;
  gap:8px;
}
.pg-hero__bar span{
  height:6px;
  flex:1;
  background:var(--hp-pink);
  box-shadow:0 0 12px rgba(255,0,204,.7);
}
.pg-hero__bar span:nth-child(2){background:var(--hp-cyan);box-shadow:0 0 12px rgba(0,229,255,.6);}
.pg-hero__bar span:nth-child(3){background:var(--hp-lime);box-shadow:0 0 12px rgba(249,248,113,.5);}

/* ===== LATEST ===== */
.pg-latest{
  padding:44px 20px;
  background:var(--hp-bg);
  position:relative;
}
.pg-latest::before{
  content:"";
  position:absolute;
  inset:12px;
  border:2px solid rgba(255,0,204,.4);
  pointer-events:none;
  border-radius:var(--hp-radius);
}
.pg-latest__head{
  max-width:1200px;
  margin:0 auto 28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:14px;
  position:relative;
  z-index:1;
}
.pg-latest__grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  position:relative;
  z-index:1;
}
.pg-card{
  background:linear-gradient(145deg,#2f1e42 0%,var(--hp-card) 60%,#351a3a 100%);
  border:var(--hp-w) solid var(--hp-pink);
  border-radius:var(--hp-radius);
  padding:14px;
  box-shadow:var(--hp-shadow),0 0 20px rgba(255,0,204,.15);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  transform:rotate(0deg);
  position:relative;
}
.pg-card:hover{
  transform:translateY(-4px) rotate(-1deg);
  box-shadow:10px 10px 0 rgba(0,0,0,.55),0 0 28px rgba(0,229,255,.4);
  border-color:var(--hp-cyan);
}
.pg-card--tilt{transform:rotate(1.2deg) translateY(4px);}
.pg-card--tilt:hover{transform:rotate(0deg) translateY(-4px);}
.pg-card__img{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:12px;
  background:var(--hp-bg2);
}
.pg-card__img img{
  width:100%;
  height:90px;
  object-fit:cover;
  filter:saturate(1.35) contrast(1.1);
}
.pg-card__img .c-badge{
  position:absolute;
  top:8px;
  right:8px;
  font-size:.7rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  letter-spacing:.05em;
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.pg-card__title{
  font-size:1rem;
  font-weight:700;
  margin:0 0 8px;
  line-height:1.4;
  letter-spacing:.01em;
}
.pg-card__meta{
  display:flex;
  justify-content:space-between;
  font-family:var(--hp-mono);
  font-size:.72rem;
  color:var(--hp-sub);
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:8px;
  margin:0;
}
.pg-card__batch{
  color:var(--hp-cyan);
}

/* ===== CATEGORIES ===== */
.pg-cats{
  padding:44px 20px;
  background:linear-gradient(150deg,var(--hp-bg2) 0%,var(--hp-bg3) 100%);
  position:relative;
  border-top:4px solid var(--hp-cyan);
  border-bottom:4px solid var(--hp-cyan);
}
.pg-cats__head{
  max-width:1200px;
  margin:0 auto 28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:14px;
}
.pg-cats__grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.c-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:170px;
  padding:16px;
  border-radius:var(--hp-radius);
  border:var(--hp-w) solid transparent;
  overflow:hidden;
  box-shadow:var(--hp-shadow);
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.c-tile:hover{
  transform:translateY(-5px) rotate(-1deg);
  border-color:var(--hp-white,var(--hp-lime));
}
.c-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.35;
  mix-blend-mode:screen;
}
.c-tile__name{
  position:relative;
  z-index:1;
  font-family:var(--hp-title);
  font-size:1.5rem;
  line-height:1.2;
  text-transform:uppercase;
  color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.8);
}
.c-tile__count{
  position:relative;
  z-index:1;
  font-family:var(--hp-mono);
  font-size:1.9rem;
  font-weight:700;
  color:var(--hp-lime);
  text-shadow:0 0 12px rgba(249,248,113,.7),2px 2px 0 rgba(0,0,0,.8);
}
.c-tile--amber{background:linear-gradient(145deg,#e07c20,#a3501f);border-color:#ff9f1c;}
.c-tile--blue{background:linear-gradient(145deg,#0e8ba3,#06556e);border-color:#00e5ff;}
.c-tile--green{background:linear-gradient(145deg,#1e9e6f,#136542);border-color:#00a878;}
.c-tile--pink{background:linear-gradient(145deg,#c81f8f,#7e145c);border-color:#ff00cc;}

/* ===== HOT ===== */
.pg-hot{
  padding:44px 20px;
  background:var(--hp-bg);
  position:relative;
}
.pg-hot__head{
  max-width:1200px;
  margin:0 auto 24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
}
.pg-hot__note{
  font-family:var(--hp-mono);
  font-size:.78rem;
  color:var(--hp-amber);
  border:2px solid var(--hp-amber);
  padding:4px 10px;
  border-radius:4px;
}
.pg-hot__list{
  max-width:1200px;
  margin:0 auto;
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pg-hot__row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "rank name cat"
    "rank bar  num";
  align-items:center;
  gap:4px 14px;
  padding:12px 16px;
  background:linear-gradient(145deg,#261b38,var(--hp-card));
  border:2px solid rgba(255,255,255,.1);
  border-radius:10px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.pg-hot__row:hover{
  border-color:var(--hp-cyan);
  background:linear-gradient(145deg,#2d1f42,#191225);
}
.pg-hot__row--first{
  border-color:var(--hp-amber);
  box-shadow:0 0 18px rgba(255,179,71,.18);
}
.pg-hot__rank{
  grid-area:rank;
  font-family:var(--hp-mono);
  font-size:1.6rem;
  font-weight:700;
  color:var(--hp-amber);
  min-width:3ch;
}
.pg-hot__row--first .pg-hot__rank{
  color:var(--hp-lime);
  text-shadow:0 0 10px rgba(249,248,113,.8);
}
.pg-hot__icon{
  display:none;
}
.pg-hot__row--first .pg-hot__icon{
  display:block;
  grid-column:1;
  grid-row:2;
  width:40px;
  height:40px;
  object-fit:cover;
  border-radius:6px;
  box-shadow:0 0 12px rgba(255,0,204,.5);
}
.pg-hot__name{
  grid-area:name;
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
}
.pg-hot__cat{
  grid-area:cat;
  font-family:var(--hp-mono);
  font-size:.7rem;
  color:var(--hp-sub);
  border:1px solid var(--hp-sub);
  border-radius:4px;
  padding:2px 6px;
  justify-self:end;
}
.pg-hot__bar{
  grid-area:bar;
  height:8px;
  background:rgba(255,255,255,.12);
  border-radius:99px;
  overflow:hidden;
  display:block;
}
.pg-hot__fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--hp-amber),var(--hp-lime));
  border-radius:99px;
  box-shadow:0 0 10px rgba(249,248,113,.6);
}
.pg-hot__num{
  grid-area:num;
  font-family:var(--hp-mono);
  font-size:.8rem;
  color:var(--hp-cyan);
  text-align:right;
}

/* ===== TAGS ===== */
.pg-tags{
  padding:44px 20px;
  background:linear-gradient(160deg,#1a0e28 0%,var(--hp-bg2) 50%,#170d20 100%);
  border-top:3px solid var(--hp-amber);
  border-bottom:3px solid var(--hp-pink);
}
.pg-tags__head{
  max-width:1200px;
  margin:0 auto 24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:14px;
}
.pg-tags__cloud{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.c-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 14px;
  border-radius:6px;
  font-weight:700;
  line-height:1.2;
  border-width:2px;
  border-style:solid;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.c-tag:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 16px rgba(255,255,255,.2);
}
.c-tag span{
  font-family:var(--hp-mono);
  font-size:.72em;
  opacity:.85;
  background:rgba(0,0,0,.3);
  border-radius:4px;
  padding:2px 6px;
}
.c-tag--lg{font-size:1.2rem;padding:8px 18px;}
.c-tag--md{font-size:.9rem;}
.c-tag--sm{font-size:.75rem;padding:4px 10px;}
.pg-tag--amber{background:var(--tg1,var(--hp-amber));border-color:#8b5a10;color:#1a0f00;}
.pg-tag--cyan{background:var(--hp-cyan);border-color:#00748a;color:#001f25;}
.pg-tag--lime{background:var(--hp-lime);border-color:#898a20;color:#2b2b00;}
.pg-tag--pink{background:var(--hp-pink);border-color:#8a0e69;color:#fff;}
.pg-tag--green{background:var(--hp-green);border-color:#137a52;color:#052e1e;}

/* ===== ARCHIVE ===== */
.pg-archive{
  padding:44px 20px;
  background:linear-gradient(170deg,var(--hp-bg2) 0%,var(--hp-bg) 60%);
}
.pg-archive__head{
  max-width:1200px;
  margin:0 auto 30px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:14px;
}
.pg-archive__track{
  max-width:1200px;
  margin:0 auto;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.pg-archive__track::before{
  content:"";
  position:absolute;
  left:40px;
  top:10px;
  bottom:10px;
  width:4px;
  background:linear-gradient(180deg,var(--hp-cyan),var(--hp-pink),var(--hp-amber));
  border-radius:99px;
  opacity:.6;
}
.pg-archive__node{
  position:relative;
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding-left:86px;
  cursor:pointer;
  border:2px solid transparent;
  border-radius:var(--hp-radius);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.pg-archive__node:hover{
  border-color:rgba(255,0,204,.5);
  background:rgba(255,255,255,.03);
}
.pg-archive__img{
  position:absolute;
  left:0;
  top:6px;
  width:80px;
  height:80px;
  border-radius:8px;
  object-fit:cover;
  border:2px solid var(--hp-cyan);
  box-shadow:0 0 14px rgba(0,229,255,.35);
}
.pg-archive__body{
  background:linear-gradient(145deg,#2f1e42,var(--hp-card));
  border:2px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:16px 18px;
  flex:1;
}
.pg-archive__date{
  font-family:var(--hp-mono);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--hp-amber);
  margin:0 0 4px;
}
.pg-archive__title{
  font-family:var(--hp-mono);
  font-size:1.4rem;
  color:var(--hp-cyan);
  margin:0 0 8px;
}
.pg-archive__desc{
  margin:0;
  font-size:.92rem;
  color:var(--hp-text);
  line-height:1.65;
}

/* ===== MEDIA QUERIES ===== */
@media(min-width:640px){
  .pg-latest__grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }
  .pg-card--tilt{
    transform:rotate(.8deg) translateY(6px);
  }
  .pg-cats__grid{
    grid-template-columns:repeat(2,1fr);
  }
  .pg-hot__row{
    grid-template-columns:auto 2fr 1fr 1.4fr auto;
    grid-template-areas:"rank name cat bar num";
    gap:6px 16px;
  }
  .pg-hot__row--first .pg-hot__icon{
    display:none;
  }
  .pg-hot__bar{
    height:10px;
    min-width:90px;
  }
}

@media(min-width:1024px){
  .pg-latest{
    padding:56px 32px;
  }
  .pg-latest__grid{
    grid-template-columns:repeat(4,1fr);
    gap:22px;
  }
  .pg-card:nth-child(3n+1){
    transform:rotate(-1.2deg) translateY(6px);
  }
  .pg-card:nth-child(3n+2){
    transform:rotate(.9deg) translateY(-4px);
  }
  .pg-card:nth-child(3n){
    transform:rotate(-.4deg) translateY(3px);
  }
  .pg-card:nth-child(3n+1):hover,
  .pg-card:nth-child(3n+2):hover,
  .pg-card:nth-child(3n):hover{
    transform:translateY(-6px) rotate(0deg);
  }
  .pg-cats{
    padding:56px 32px;
  }
  .pg-cats__grid{
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .pg-hot{
    padding:56px 32px;
  }
  .pg-hot__row{
    padding:14px 20px;
    gap:8px 20px;
  }
  .pg-tags{
    padding:56px 32px;
  }
  .pg-archive{
    padding:56px 32px;
  }
  .pg-archive__track{
    gap:28px;
  }
}

@media(min-width:1300px){
  .page-home .pg-hero,
  .page-home .pg-latest,
  .page-home .pg-cats,
  .page-home .pg-hot,
  .page-home .pg-tags,
  .page-home .pg-archive{
    padding-left:calc((100vw - 1280px) / 2 + 32px);
    padding-right:calc((100vw - 1280px) / 2 + 32px);
  }
}

.page-home {
  --hp-white: currentColor;
  --tg1: transparent;
}