.resource-page { background: #fff9f3; }
.resource-header:not(.scrolled) { background: linear-gradient(to bottom, rgba(115, 0, 13, .6), transparent); }

.resource-hero {
  position: relative;
  min-height: 880px;
  display: grid;
  place-items: center;
  padding: 126px 24px 86px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 218, 70, .66), transparent 18%),
    radial-gradient(circle at 88% 18%, rgba(255, 67, 151, .76), transparent 25%),
    radial-gradient(circle at 70% 92%, rgba(255, 150, 0, .88), transparent 32%),
    linear-gradient(145deg, #b90023 0%, #ff1744 42%, #ff4933 68%, #ff8a00 100%);
}
.resource-hero::before { content: "爆火"; position: absolute; left: 50%; bottom: -8vw; color: rgba(255,255,255,.065); font-size: min(38vw, 560px); font-weight: 1000; line-height: .8; letter-spacing: -.12em; white-space: nowrap; transform: translateX(-50%); }
.resource-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; pointer-events: none; }
.ring-a { width: 740px; height: 740px; transform: translate(-50%, -50%); animation: pulse-ring 6s ease-in-out infinite; }
.ring-b { width: 510px; height: 510px; border-style: dashed; transform: translate(-50%, -50%); animation: spin-ring 28s linear infinite; }
.ring-c { width: 930px; height: 930px; border-color: rgba(255,214,71,.22); transform: translate(-50%, -50%); }
.resource-hero-inner { position: relative; z-index: 3; width: min(930px, 100%); text-align: center; }
.resource-hero .eyebrow { color: rgba(255,255,255,.76); }
.resource-hero h1 { display: flex; flex-direction: column; align-items: center; margin: 0; font-size: clamp(5rem, 8vw, 8.5rem); line-height: .85; letter-spacing: -.09em; text-shadow: 0 16px 54px rgba(95,0,12,.25); }
.resource-hero h1 span { color: #ffd447; transform: rotate(-2deg); }
.resource-hero h1 em { margin-top: 18px; color: #fff; font-size: .46em; font-style: normal; letter-spacing: -.06em; }
.resource-lead { margin: 22px auto 0; color: rgba(255,255,255,.86); font-size: 1.08rem; }
.resource-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 720px; margin: 24px auto 0; }
.resource-stats > div { grid-column: span 3; }
.resource-stats div { padding: 13px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 22px; background: rgba(115,0,13,.2); backdrop-filter: blur(12px); }
.resource-stats span { display: block; color: rgba(255,255,255,.7); font-size: .7rem; }
.resource-stats strong { display: block; margin-top: 4px; font-size: 1.85rem; line-height: 1; }
.resource-enter { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 14px 24px; border-radius: 999px; color: #bd1023; background: #ffd447; font-weight: 900; box-shadow: 0 16px 40px rgba(255,212,71,.28); }
.resource-enter span { font-size: 1.2rem; }
.resource-snapshot { margin: 14px 0 0; color: rgba(255,255,255,.58); font-size: .7rem; }

.resource-catalog { width: min(1240px, calc(100vw - 80px)); margin: 0 auto; padding: 130px 0 150px; }
.catalog-heading { display: grid; grid-template-columns: 1fr 390px; align-items: end; gap: 60px; }
.catalog-heading h2 { margin: 0; font-size: clamp(3.2rem, 6vw, 6.4rem); line-height: 1; letter-spacing: -.07em; }
.catalog-heading > p { margin: 0; color: #766b67; }
.curation-toolbar { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 28px; margin-top: 70px; padding: 22px 24px; border: 1px solid rgba(245,34,53,.15); border-radius: 24px; background: linear-gradient(120deg, #fff0eb, #fff8de 55%, #ffe8ef); box-shadow: 0 14px 34px rgba(180,24,42,.06); }
.curation-heading span { display: block; color: #d3172d; font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.curation-heading strong { display: block; margin-top: 5px; font-size: 1rem; }
.curation-groups { display: grid; gap: 10px; min-width: 0; }
.curation-group { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
.curation-group > span { color: #8c7d78; font-size: .68rem; font-weight: 800; }
.curation-filters { display: flex; gap: 8px; }
.curation-filters a, .capability-filters a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid rgba(245,34,53,.18); border-radius: 999px; color: #8d2030; background: rgba(255,255,255,.82); font-weight: 780; }
.curation-filters a.active { color: #fff; border-color: transparent; background: linear-gradient(120deg, #ff1744, #ff3d79 55%, #ff7900); box-shadow: 0 10px 24px rgba(245,34,53,.18); }
.curation-filters a span, .capability-filters a span { margin-left: 4px; opacity: .65; }
.capability-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.capability-filters a { min-height: 34px; color: #6d3f1f; border-color: rgba(255,174,0,.34); background: rgba(255,248,222,.8); font-size: .72rem; }
.capability-filters a.active { color: #fff; border-color: transparent; background: linear-gradient(120deg, #ff7900, #ff3d79); }
.resource-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding-top: 30px; border-top: 1px solid rgba(23,18,17,.14); }
.resource-search { position: relative; flex: 1; max-width: 410px; }
.resource-search input[type="search"] { width: 100%; min-height: 52px; padding: 0 82px 0 20px; border: 1px solid rgba(23,18,17,.16); border-radius: 999px; outline: none; background: #fff; }
.resource-search input[type="search"]:focus { border-color: #f52235; box-shadow: 0 0 0 4px rgba(245,34,53,.1); }
.resource-search button { position: absolute; right: 5px; top: 5px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; color: #fff; background: #f52235; font-weight: 800; cursor: pointer; }
.resource-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.resource-filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border: 1px solid rgba(23,18,17,.14); border-radius: 999px; color: #5f5551; background: #fff; }
.resource-filters a.active { color: #fff; border-color: #f52235; background: linear-gradient(120deg, #ff1744, #ff6532); }
.resource-filters a span { margin-left: 4px; opacity: .65; }
.resource-result { margin: 22px 0; color: #766b67; font-size: .82rem; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.resource-card { position: relative; display: flex; flex-direction: column; min-height: 370px; padding: 22px; overflow: hidden; border: 1px solid rgba(23,18,17,.12); border-radius: 26px; background: #fff; box-shadow: 0 10px 34px rgba(73,18,22,.045); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.resource-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #ff1744, #ff3d79 48%, #ff9800); }
.resource-card:hover { transform: translateY(-5px); border-color: rgba(245,34,53,.34); box-shadow: 0 20px 48px rgba(165,18,33,.1); }
.resource-card-top { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.resource-avatar { display: grid; place-items: center; width: 52px; aspect-ratio: 1; border: 2px solid #fff; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #ff3d79, #f52235 52%, #ff7900); font-size: 1.25rem; font-weight: 950; box-shadow: 0 0 0 1px rgba(245,34,53,.18), 0 8px 18px rgba(245,34,53,.15); }
.resource-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.resource-identity { min-width: 0; }
.resource-identity h3 { margin: 0; overflow: hidden; font-size: 1.12rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.resource-identity p { margin: 5px 0 0; overflow: hidden; color: #8c7d78; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.platform-badge { padding: 6px 10px; border-radius: 999px; color: #c70d20; background: #fff0eb; font-size: .68rem; font-weight: 800; }
.resource-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 18px; }
.resource-metrics div { grid-column: span 2; min-width: 0; min-height: 66px; padding: 11px 9px; border-radius: 14px; background: #fff6f3; }
.resource-metrics div:nth-child(-n+2) { grid-column: span 3; }
.resource-metrics span { display: block; min-height: 1.35em; color: #8c7d78; font-size: .65rem; line-height: 1.25; }
.resource-metrics strong { display: block; margin-top: 4px; overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.resource-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; margin-top: 15px; }
.resource-tags span { padding: 5px 9px; border-radius: 999px; color: #b61b2d; background: #fff0eb; font-size: .64rem; font-weight: 750; }
.resource-tags .curation-tag.recommended { color: #fff; background: linear-gradient(120deg, #ff1744, #ff6532); }
.resource-tags .curation-tag.quality { color: #7f4b00; background: #ffe8a3; }
.resource-intro { display: -webkit-box; min-height: 55px; margin: 14px 0 18px; overflow: hidden; color: #625753; font-size: .76rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.resource-intro span { display: block; margin-bottom: 2px; color: #a59893; font-size: .62rem; font-weight: 750; }
.profile-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.profile-links.single { grid-template-columns: 1fr; }
.profile-link { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 12px; color: #fff; background: linear-gradient(120deg, #ff1744, #ff6532); font-size: .72rem; font-weight: 850; }
.profile-link.secondary { color: #d3172d; border: 1px solid rgba(245,34,53,.18); background: #fff3ef; }
.profile-link.unavailable { color: #a59893; background: #f4efec; }
.recent-cases-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin-top: 8px; padding: 0 13px; border: 1px solid rgba(245,34,53,.22); border-radius: 12px; color: #bd1023; background: linear-gradient(120deg, #fff0eb, #ffe8ef); font-size: .7rem; font-weight: 820; }
.recent-cases-link strong { color: #d3172d; font-size: .72rem; }
.recent-cases-link:hover { color: #fff; border-color: transparent; background: linear-gradient(120deg, #ff1744, #ff6532); }
.recent-cases-link:hover strong { color: #fff; }
.case-library-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; margin-top: 8px; padding: 0 13px; border: 1px solid rgba(255,174,0,.38); border-radius: 12px; color: #6d3f1f; background: linear-gradient(120deg, #fff1a8, #ffe1c9); font-size: .7rem; font-weight: 750; box-shadow: 0 8px 20px rgba(255,168,0,.12); }
.case-library-link strong { color: #c70d20; font-size: .74rem; }
.case-library-link:hover { color: #fff; border-color: transparent; background: linear-gradient(120deg, #ff1744, #ff3d79 58%, #ff7900); }
.case-library-link:hover strong { color: #fff; }
.resource-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 42px; }
.resource-pagination a { display: inline-grid; place-items: center; min-width: 42px; min-height: 42px; border: 1px solid rgba(245,34,53,.22); border-radius: 12px; color: #b61b2d; background: #fff; font-weight: 800; }
.resource-pagination a.active { color: #fff; background: #f52235; }
.resource-empty { padding: 80px 20px; border: 1px dashed rgba(23,18,17,.2); border-radius: 28px; color: #766b67; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 980px) {
  .resource-hero { min-height: 820px; }
  .catalog-heading { grid-template-columns: 1fr; gap: 28px; }
  .curation-toolbar { grid-template-columns: 1fr; align-items: flex-start; }
  .resource-toolbar { align-items: stretch; flex-direction: column; }
  .resource-search { max-width: none; }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .resource-hero { min-height: 760px; padding: 108px 16px 68px; }
  .resource-hero h1 { font-size: clamp(4.8rem, 25vw, 7rem); }
  .resource-hero h1 em { margin-top: 20px; font-size: .38em; }
  .resource-lead { font-size: .95rem; }
  .resource-stats { gap: 8px; margin-top: 30px; }
  .resource-stats div { padding: 15px 7px; border-radius: 18px; }
  .resource-stats strong { font-size: 1.7rem; }
  .resource-stats span { font-size: .62rem; }
  .resource-ring.ring-c { display: none; }
  .ring-a { width: 510px; height: 510px; }
  .ring-b { width: 330px; height: 330px; }
  .resource-catalog { width: calc(100% - 32px); padding: 90px 0 100px; }
  .curation-toolbar { margin-top: 28px; padding: 18px; }
  .curation-group { grid-template-columns: 1fr; gap: 6px; }
  .curation-filters { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .curation-filters a { flex: 0 0 auto; }
  .capability-filters { width: 100%; flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
  .resource-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .resource-filters a { flex: 0 0 auto; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 360px; padding: 20px; }
}