/* resources.html page styles (moved out of the page so the deployment CSP,
   which is style-src 'self', no longer blocks it). Rules unchanged. */
.resources-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px 60px; text-align: center; }
.resources-back { position: fixed; top: 22px; left: 22px; display: inline-flex; align-items: center; gap: 7px; color: inherit; opacity: .7; text-decoration: none; font-size: 13px; font-weight: 550; z-index: 20; padding: 9px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); backdrop-filter: blur(10px); transition: opacity .2s, background .2s, transform .2s; }
.resources-back:hover { opacity: 1; background: rgba(255,255,255,.08); transform: translateX(-2px); }
.resources-hero { margin-bottom: 32px; }
.resources-hero .section-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .45; margin-bottom: 12px; }
.resources-hero h1 { font-size: clamp(32px, 5.5vw, 50px); font-weight: 750; margin: 0 0 14px; letter-spacing: -0.025em; background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,.7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.resources-hero p { font-size: 15px; opacity: .55; max-width: 420px; margin: 0 auto; line-height: 1.75; }
.resources-list { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; backdrop-filter: blur(8px); }
.resource-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.resource-row:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.resource-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, rgba(154,130,255,.18), rgba(72,221,255,.12)); display: flex; align-items: center; justify-content: center; opacity: .9; }
.resource-info { min-width: 0; flex: 1; }
.resource-name { font-size: 14px; font-weight: 600; word-break: break-all; line-height: 1.4; }
.resource-meta { font-size: 12px; opacity: .4; margin-top: 3px; }
.resource-dl { flex-shrink: 0; min-height: 36px; padding: 0 18px; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.resources-empty { padding: 40px 20px; opacity: .4; font-size: 14px; }
.resources-error { padding: 20px; color: #fca5a5; font-size: 14px; }
@media (max-width: 480px) {
  .resource-row { flex-wrap: wrap; }
  .resource-dl { width: 100%; justify-content: center; }
  .resources-back { top: 14px; left: 14px; }
}