.template-nav-shell {
  transition: grid-template-columns .2s ease;
}

.template-intro {
  margin: 26px 0;
  padding: 24px;
  border: var(--theme-border);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.template-intro h2 {
  margin-bottom: 8px;
}

.template-intro p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.template-01 .template-main { max-width: 1220px; }
.template-01 .template-hero { border-left-width: 10px; }
.template-01 .latest-module .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.template-02 .template-main { max-width: 1320px; }
.template-02 .template-hero { min-height: 620px; border-radius: 0; }
.template-02 .template-rank { grid-template-columns: 360px 1fr; }
.template-02 .recommend-panel { order: -1; }

.template-03 .template-main { max-width: 1260px; display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
.template-03 .template-hero, .template-03 .latest-module, .template-03 .template-types { grid-column: 1; }
.template-03 .template-rank { grid-column: 2; grid-row: 2 / span 3; display: block; margin-top: 0; }
.template-03 .rank-panel { margin-bottom: 18px; }

.template-04 .template-main { max-width: 1160px; }
.template-04 .latest-module { margin-top: 0; }
.template-04 .template-hero { grid-template-columns: 1fr 320px; min-height: 430px; }
.template-04 .card { border-radius: 4px; }

.template-05 .template-main { max-width: 1240px; }
.template-05 .template-intro { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; }
.template-05 .template-types .type-section:nth-child(odd) .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.template-06 .template-main { max-width: 1040px; }
.template-06 .template-hero { min-height: 360px; padding: 28px; }
.template-06 h1 { font-size: 40px; }
.template-06 .grid { gap: 10px; }

.template-07 .template-main { max-width: 1180px; }
.template-07 .template-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.template-07 .type-section { margin-top: 24px; }
.template-07 .type-section .grid { grid-template-columns: 1fr; }

.template-08 .template-main { max-width: 1280px; }
.template-08 .template-hero { min-height: 660px; align-items: center; }
.template-08 .latest-module .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.template-09 .template-main { max-width: 1120px; }
.template-09 .template-intro { border-left: 6px solid var(--accent); }
.template-09 .card { display: grid; grid-template-columns: 42% 1fr; }
.template-09 .cover-link { aspect-ratio: 3 / 4; }

.template-10 .template-main { max-width: 1340px; }
.template-10 .template-rank { grid-template-columns: 1fr 1fr; }
.template-10 .template-hero { border-radius: 80px 8px 80px 8px; }

.template-11 .template-main { max-width: 1200px; }
.template-11 .template-hero, .template-11 .card, .template-11 .rank-panel, .template-11 .recommend-panel { box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 24%, transparent); }
.template-11 .brand { text-transform: uppercase; }

.template-12 .template-main { max-width: 1240px; display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
.template-12 .template-rank { grid-column: 1; grid-row: 1 / span 4; display: block; margin-top: 0; }
.template-12 .template-hero, .template-12 .latest-module, .template-12 .template-types { grid-column: 2; }

.template-13 .template-main { max-width: 1180px; }
.template-13 .card, .template-13 .template-intro, .template-13 .page-head { border-radius: 0; }
.template-13 .template-types { padding: 18px; border: var(--theme-border); }

.template-14 .template-main { max-width: 1300px; }
.template-14 .template-types .grid .card:nth-child(1) { grid-column: span 2; }
.template-14 .template-hero { min-height: 460px; }

.template-15 .template-main { max-width: 1100px; }
.template-15 .topbar { position: static; }
.template-15 .card { background: color-mix(in srgb, var(--panel) 96%, #fff); }

.template-16 .template-main { max-width: 1220px; }
.template-16 .template-intro { border-top: 4px solid var(--accent); }
.template-16 .section-head h2 { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 8px; }

.template-17 .template-main { max-width: 1160px; }
.template-17 .template-types { order: -1; }
.template-17 .hero-stats { border-radius: 60px 8px 60px 8px; }

.template-18 .template-main { max-width: 1260px; }
.template-18 .template-hero, .template-18 .template-intro, .template-18 .category-hero { background-size: 22px 22px; }
.template-18 .card { border-style: dashed; }

.template-19 .template-main { max-width: 1140px; }
.template-19 .card, .template-19 .hero, .template-19 .rank-panel, .template-19 .recommend-panel { border-radius: 0; }
.template-19 .card-img { filter: grayscale(.35); }

.category-main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 54px; }
.category-portal .category-main, .category-stack .category-main { max-width: 1220px; }
.category-banner .category-hero { min-height: 260px; display: flex; flex-direction: column; justify-content: end; }
.category-side .category-main { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.category-side .category-hero { position: sticky; top: 90px; }
.category-catalog .categoryGrid, .category-catalog #categoryGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.category-panel .category-list-shell { padding: 18px; border: var(--theme-border); background: color-mix(in srgb, var(--panel) 84%, transparent); }
.category-compact .category-hero { padding: 20px; }
.category-compact #categoryGrid { gap: 10px; }
.category-split .category-main { max-width: 1280px; }
.category-showcase .category-hero { min-height: 360px; }
.category-journal .card { display: grid; grid-template-columns: 38% 1fr; }
.category-arena .category-hero { border-radius: 70px 8px 70px 8px; }
.category-neon .category-list-shell { box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent); }
.category-index .category-main { display: grid; grid-template-columns: 1fr; }
.category-box .category-hero, .category-box .card { border-radius: 0; }
.category-stream #categoryGrid .card:nth-child(7n + 1) { grid-column: span 2; }
.category-clean .category-hero { background: transparent; }
.category-redline .category-hero { border-top: 5px solid var(--accent); }
.category-olive .category-hero { border-radius: 8px 64px 8px 8px; }
.category-blueprint .category-hero { border-style: dashed; }
.category-mono .category-hero, .category-mono .card { border-radius: 0; }

@media (max-width: 900px) {
  .template-03 .template-main,
  .template-07 .template-types,
  .template-12 .template-main,
  .category-side .category-main {
    display: block;
  }

  .template-03 .template-rank,
  .template-12 .template-rank {
    margin-top: 34px;
  }

  .template-09 .card,
  .category-journal .card {
    display: block;
  }

  .template-14 .template-types .grid .card:nth-child(1),
  .category-stream #categoryGrid .card:nth-child(7n + 1) {
    grid-column: span 1;
  }
}