/* ============================================================
   NGI PDF LIBRARY — Catalog Page
   Dark-gold design system (matches workbooks)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #07070b;
  color: #e4e4e7;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- TOP BAR ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(7, 7, 11, 0.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid #1f1f26;
  position: sticky; top: 0; z-index: 100;
}
.topbar-tag {
  font-size: 0.75rem; color: #fbbf24;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 999px;
  background: rgba(251, 191, 36, 0.08);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.topbar-brand { display: flex; align-items: center; gap: 0.75rem; }
.topbar-brand span { font-size: 0.85rem; font-weight: 600; color: #fafafa; }
.topbar-logo { height: 32px; width: auto; }

/* ---------- HERO ---------- */
.hero {
  text-align: center;
  padding: 5rem 2rem 3rem;
  position: relative;
  background:
    radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.1) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(45, 212, 191, 0.05) 0%, transparent 50%),
    #07070b;
  overflow: hidden;
  border-bottom: 1px solid #1f1f26;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(251, 191, 36, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 191, 36, 0.03) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-kicker {
  font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: #fbbf24; margin-bottom: 1.5rem; font-weight: 600;
}
.hero h1 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.2;
  background: linear-gradient(135deg, #fafafa 0%, #fbbf24 50%, #fafafa 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}
.hero p { color: #a1a1aa; max-width: 600px; margin: 0 auto; font-size: 1.05rem; }
.hero-stats {
  display: flex; gap: 2.5rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap;
}
.hero-stat-num { font-size: 2rem; font-weight: 800; color: #fbbf24; letter-spacing: -0.02em; }
.hero-stat-lbl { font-size: 0.85rem; color: #71717a; }

/* ---------- CONTROLS ---------- */
.controls {
  max-width: 1200px; margin: 0 auto;
  padding: 2.5rem 2rem 1rem;
}
.search-wrap { position: relative; max-width: 560px; margin: 0 auto 1.5rem; }
.search-wrap .search-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: #71717a; font-size: 1.1rem; }
#search {
  width: 100%; padding: 1rem 1.25rem 1rem 3rem;
  background: #0d0d14; border: 1px solid #27272a; border-radius: 12px;
  color: #fafafa; font-size: 1rem; font-family: inherit; outline: none;
  transition: border-color 0.2s;
}
#search:focus { border-color: #fbbf24; }
#search::placeholder { color: #52525b; }

.filters {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.filter-chip {
  padding: 0.55rem 1.1rem; border-radius: 999px;
  background: #0d0d14; border: 1px solid #27272a; color: #a1a1aa;
  font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all 0.2s;
}
.filter-chip:hover { border-color: rgba(251, 191, 36, 0.5); color: #fafafa; }
.filter-chip.active {
  background: rgba(251, 191, 36, 0.12); border-color: #fbbf24; color: #fbbf24;
}

.result-count { text-align: center; font-size: 0.85rem; color: #71717a; margin-bottom: 1.5rem; }
.result-count span { color: #fbbf24; font-weight: 600; }

/* ---------- CARD GRID ---------- */
.grid {
  max-width: 1200px; margin: 0 auto;
  padding: 1rem 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.card {
  background: linear-gradient(180deg, #12121a 0%, #0d0d14 100%);
  border: 1px solid #1f1f26; border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: all 0.3s ease;
}
.card:hover { border-color: rgba(251, 191, 36, 0.4); transform: translateY(-3px); }

/* ---------- CALLOUT ---------- */
.callout {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(251, 191, 36, 0.02) 100%);
  border: 1px solid rgba(251, 191, 36, 0.25); border-radius: 12px;
  padding: 1.75rem 2rem; margin: 2rem 0;
}
.callout p { color: #fafafa; margin: 0; font-size: 1.05rem; }

/* ---------- RESULT BOX ---------- */
.result-box {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(45, 212, 191, 0.05) 100%);
  border: 2px solid rgba(251, 191, 36, 0.4); border-radius: 14px;
  padding: 2rem; margin: 2rem 0; text-align: center;
}

/* mini cover (CSS-generated, no images) */
.card-cover {
  height: 130px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.12) 0%, transparent 60%), #0a0a12;
  border-bottom: 1px solid #1f1f26;
}
.card-cover::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(251, 191, 36, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 191, 36, 0.04) 1px, transparent 1px);
  background-size: 30px 30px; pointer-events: none;
}
.card-cover-mark {
  position: relative; z-index: 2; font-size: 2.7rem;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
}
.cover-art { overflow: hidden; isolation: isolate; }
.cover-art::after {
  content: ''; position: absolute; z-index: 1; width: 118px; height: 118px;
  right: -24px; bottom: -53px; border-radius: 50%; opacity: 0.92; transform: rotate(-18deg);
}
.cover-art--biology { background: radial-gradient(circle at 28% 30%, #3ee6a0 0 3px, transparent 4px), radial-gradient(circle at 70% 62%, #16a36a 0 4px, transparent 5px), linear-gradient(135deg, #082f26, #0d5b45); }
.cover-art--biology::after { background: repeating-radial-gradient(circle at center, #74f0ba 0 3px, transparent 4px 13px); }
.cover-art--chemistry { background: linear-gradient(135deg, #482014, #963b20); }
.cover-art--chemistry::after { background: conic-gradient(from 30deg, #ffb36b, #e4512e, #ffd499, #ffb36b); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-radius: 0; }
.cover-art--physics { background: radial-gradient(ellipse at 36% 48%, transparent 0 16%, #7fd5ff 17% 18%, transparent 19% 32%, #5ba4ff 33% 34%, transparent 35%), linear-gradient(135deg, #101f55, #2a4d9b); }
.cover-art--physics::after { background: radial-gradient(circle, #d9f4ff 0 8%, #6cc9ff 9% 15%, transparent 16%); }
.cover-art--maths { background: linear-gradient(135deg, #132d56, #1c5f90); }
.cover-art--maths::after { background: repeating-linear-gradient(45deg, rgba(151,220,255,.9) 0 3px, transparent 3px 15px); }
.cover-art--english { background: linear-gradient(135deg, #4a1f51, #833b82); }
.cover-art--english::after { background: repeating-linear-gradient(0deg, rgba(255,207,245,.75) 0 2px, transparent 2px 13px); }
.cover-art--history { background: linear-gradient(135deg, #493317, #8a6431); }
.cover-art--history::after { background: repeating-linear-gradient(90deg, rgba(255,220,145,.5) 0 4px, transparent 4px 13px); }
.cover-art--geography { background: radial-gradient(circle at 65% 35%, #81ddff 0 15%, transparent 16%), linear-gradient(135deg, #12435c, #2d8b68); }
.cover-art--geography::after { background: radial-gradient(ellipse, #83d773 0 38%, transparent 39%); }
.cover-art--computing { background: linear-gradient(135deg, #17213e, #3340a1); }
.cover-art--computing::after { background: repeating-linear-gradient(90deg, #91a0ff 0 4px, transparent 4px 14px), repeating-linear-gradient(0deg, #91a0ff 0 4px, transparent 4px 14px); }
.cover-art--wellbeing { background: radial-gradient(circle at 24% 30%, #ffda8b, transparent 22%), linear-gradient(135deg, #4a2c6c, #9c5c9e); }
.cover-art--wellbeing::after { background: radial-gradient(circle, #f7c7f4 0 22%, transparent 23%); }
.cover-art--business { background: linear-gradient(135deg, #153d43, #237e7b); }
.cover-art--business::after { background: repeating-linear-gradient(90deg, rgba(157,249,219,.85) 0 10px, transparent 10px 19px); }
.cover-art--languages { background: linear-gradient(135deg, #53243a, #9d3c58); }
.cover-art--languages::after { background: radial-gradient(ellipse, #ffd0da 0 38%, transparent 39%); }
.cover-art--creative { background: linear-gradient(135deg, #683318, #c0622f); }
.cover-art--creative::after { background: conic-gradient(#ffe56c, #ff7e68, #aa74ff, #6ad5ff, #ffe56c); }
.cover-art--support { background: linear-gradient(135deg, #503d1e, #9b7a31); }
.cover-art--support::after { background: radial-gradient(circle, #ffe49a 0 30%, transparent 31%); }
.cover-art--exam { background: linear-gradient(135deg, #59320b, #a46316); }
.cover-art--exam::after { background: conic-gradient(from 0deg, #ffe28a 0 25%, transparent 25% 50%, #ffe28a 50% 75%, transparent 75%); }
.cover-art--general { background: linear-gradient(135deg, #222436, #4f5275); }
.cover-art--general::after { background: radial-gradient(circle, #c7ceff 0 25%, transparent 26%); }
.card-cat {
  position: absolute; top: 0.75rem; left: 0.75rem;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 4px;
  background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3);
}
.card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.card-title { font-size: 1.05rem; font-weight: 700; color: #fafafa; margin-bottom: 0.5rem; line-height: 1.3; }
.card-desc { font-size: 0.85rem; color: #a1a1aa; flex: 1; margin-bottom: 1rem; }
.card-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.7rem 1rem; border-radius: 8px;
  background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24; font-weight: 600; font-size: 0.85rem; text-decoration: none; font-family: inherit;
  transition: all 0.2s;
}
.card-btn:hover { background: #fbbf24; color: #07070b; text-decoration: none; }

.no-results {
  grid-column: 1 / -1; text-align: center; padding: 4rem 2rem; color: #71717a;
}
.no-results-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }

/* ---------- FOOTER ---------- */
.global-footer {
  padding: 3rem 2rem; text-align: center;
  background: #050508; border-top: 1px solid #1f1f26;
}

/* ---------- MEMBERSHIP BANNER ---------- */
.mem-banner {
  max-width: 1200px; margin: 0 auto 2rem; padding: 0 2rem;
}
.mem-banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(45, 212, 191, 0.06) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 14px; padding: 1.75rem 2rem; flex-wrap: wrap;
}
.mem-banner-text { flex: 1; min-width: 250px; }
.mem-banner-title { font-size: 1.25rem; font-weight: 700; color: #fafafa; margin-bottom: 0.3rem; }
.mem-banner-price { color: #fbbf24; font-weight: 800; }
.mem-banner-desc { font-size: 0.9rem; color: #a1a1aa; }
.mem-banner-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.75rem; border-radius: 10px;
  background: #fbbf24; color: #07070b; font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: all 0.2s;
}
.mem-banner-btn:hover { background: #f59e0b; text-decoration: none; transform: translateY(-1px); }

/* ---------- SECTION LABEL ---------- */
.section-label {
  max-width: 1200px; margin: 0 auto 1rem; padding: 0 2rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.section-label h2 { font-size: 1.3rem; font-weight: 700; color: #fafafa; }
.section-label .sl-badge {
  font-size: 0.75rem; color: #fbbf24; background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.3); border-radius: 999px; padding: 0.2rem 0.7rem; font-weight: 600;
}

/* ---------- CARD EXTRAS ---------- */
.edition-badge {
  position: absolute; top: 0.75rem; right: 0.75rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem; border-radius: 4px;
}
.edition-digital { background: rgba(94, 200, 255, 0.15); color: #5ec8ff; border: 1px solid rgba(94, 200, 255, 0.3); }
.edition-print { background: rgba(255,255,255,0.08); color: #a1a1aa; border: 1px solid #27272a; }
.card-cover .card-cat { z-index: 2; }

/* locked state */
.card-locked .card-btn { background: #1f1f26; border-color: #27272a; color: #71717a; cursor: not-allowed; }
.card-locked .card-cover-mark { opacity: 0.4; }
.lock-icon { margin-right: 0.3rem; }

/* tag chips */
.card-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.card-tag { font-size: 0.68rem; color: #71717a; background: #0d0d14; border: 1px solid #1f1f26; border-radius: 4px; padding: 0.15rem 0.45rem; }
.card-meta { font-size: 0.72rem; color: #52525b; margin-bottom: 0.5rem; }

/* ---------- SORT DROPDOWN ---------- */
.sort-wrap {
  display: flex; align-items: center; gap: 0.5rem; justify-content: center;
  margin-bottom: 1.5rem;
}
.sort-wrap label { font-size: 0.8rem; color: #71717a; font-weight: 600; }
#sort {
  padding: 0.5rem 0.85rem; background: #0d0d14; border: 1px solid #27272a;
  border-radius: 8px; color: #fafafa; font-size: 0.85rem; font-family: inherit; outline: none;
}
#sort:focus { border-color: #fbbf24; }

/* ---------- CATEGORY CARDS (homepage) ---------- */
.cat-grid {
  max-width: 1200px; margin: 0 auto; padding: 1rem 2rem 3rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem;
}
.cat-card {
  background: linear-gradient(180deg, #12121a 0%, #0d0d14 100%);
  border: 1px solid #1f1f26; border-radius: 14px; padding: 2rem 1.5rem;
  text-decoration: none; display: flex; flex-direction: column; gap: 0.5rem;
  transition: all 0.3s; cursor: pointer;
}
.cat-card:hover { border-color: rgba(251,191,36,0.4); transform: translateY(-3px); text-decoration: none; }
.cat-card-icon { font-size: 2rem; }
.cat-card-name { font-size: 1.1rem; font-weight: 700; color: #fafafa; }
.cat-card-count { font-size: 0.8rem; color: #fbbf24; font-weight: 600; }
.cat-card-desc { font-size: 0.82rem; color: #71717a; line-height: 1.5; }

/* ---------- PAGE COUNT BADGE ---------- */
.card-pages {
  font-size: 0.68rem; color: #71717a; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.2rem;
}

/* ---------- LOCKED OVERLAY ---------- */
.card-locked-overlay {
  position: absolute; inset: 0; background: rgba(7,7,11,0.85);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 0.5rem; border-radius: 14px; z-index: 10;
}
.card-locked-overlay .lock-big { font-size: 2rem; }
.card-locked-overlay .lock-text { font-size: 0.8rem; color: #fbbf24; font-weight: 600; }

/* card needs relative for overlay */
.card { position: relative; }

/* ============================================================
   PREMIUM EXPERIENCE — membership, resource pages, dashboard
   ============================================================ */

/* ---------- NAV LINKS (shared) ---------- */
.nav-links {
  display: flex; align-items: center; gap: 1.25rem;
}
.nav-links a {
  font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.8; }

/* ---------- MEMBERSHIP HERO ---------- */
.mem-hero {
  text-align: center; padding: 5rem 2rem 3rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(251,191,36,0.12) 0%, transparent 55%),
    #07070b;
  border-bottom: 1px solid #1f1f26;
}
.mem-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fafafa 0%, #fbbf24 50%, #fafafa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  max-width: 800px; margin: 0 auto 1.5rem;
}
.mem-hero p { max-width: 650px; margin: 0 auto 2.5rem; color: #a1a1aa; font-size: 1.1rem; }
.mem-price-card {
  display: inline-flex; flex-direction: column; gap: 0.5rem;
  background: linear-gradient(180deg, #12121a 0%, #0d0d14 100%);
  border: 2px solid rgba(251,191,36,0.4); border-radius: 16px;
  padding: 2rem 3rem; margin: 0 auto 2rem;
}
.mem-price-amount { font-size: 3.5rem; font-weight: 800; color: #fbbf24; letter-spacing: -0.03em; }
.mem-price-period { font-size: 1rem; color: #a1a1aa; }

/* ---------- VALUE GRID ---------- */
.value-grid {
  max-width: 1000px; margin: 0 auto; padding: 1rem 2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
}
.value-card {
  background: linear-gradient(180deg, #12121a 0%, #0d0d14 100%);
  border: 1px solid #1f1f26; border-radius: 14px; padding: 2rem; text-align: center;
  transition: border-color 0.3s;
}
.value-card:hover { border-color: rgba(251,191,36,0.3); }
.value-card-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.value-card h3 { color: #fafafa; font-size: 1.15rem; margin-bottom: 0.5rem; }
.value-card p { color: #a1a1aa; font-size: 0.9rem; margin: 0; }

/* ---------- INCLUSION LIST ---------- */
.inclusion-list {
  max-width: 600px; margin: 0 auto; padding: 0 2rem;
  list-style: none;
}
.inclusion-list li {
  padding: 0.85rem 1.5rem; background: #0d0d14; border: 1px solid #1f1f26;
  border-radius: 10px; margin-bottom: 0.6rem; color: #d4d4d8;
  display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem;
}
.inclusion-list li::before { content: '✓'; color: #fbbf24; font-weight: 800; font-size: 1.1rem; }

/* ---------- UNLOCK MODAL ---------- */
.unlock-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(7,7,11,0.92); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 2rem;
}
.unlock-overlay.active { display: flex; }
.unlock-modal {
  background: linear-gradient(180deg, #12121a 0%, #0d0d14 100%);
  border: 2px solid rgba(251,191,36,0.4); border-radius: 20px;
  max-width: 480px; width: 100%; padding: 3rem 2.5rem; text-align: center;
  position: relative;
}
.unlock-modal .unlock-close {
  position: absolute; top: 1rem; right: 1.25rem; background: none; border: none;
  color: #71717a; font-size: 1.5rem; cursor: pointer; transition: color 0.2s;
}
.unlock-modal .unlock-close:hover { color: #fafafa; }
.unlock-modal .unlock-icon { font-size: 3rem; margin-bottom: 1rem; }
.unlock-modal h2 { font-size: 1.6rem; color: #fafafa; margin-bottom: 0.75rem; }
.unlock-modal p { color: #a1a1aa; margin-bottom: 1.5rem; font-size: 0.95rem; }
.unlock-modal .unlock-price { color: #fbbf24; font-size: 1.1rem; font-weight: 700; margin-bottom: 1.5rem; }
.unlock-modal .unlock-btn {
  display: inline-block; padding: 1rem 2.5rem; border-radius: 12px;
  background: #fbbf24; color: #07070b; font-weight: 700; text-decoration: none; font-size: 1.05rem;
  transition: background 0.2s;
}
.unlock-modal .unlock-btn:hover { background: #f59e0b; }

/* ---------- RESOURCE PAGE ---------- */
.resource-hero {
  padding: 3rem 2rem 2rem; background:
    radial-gradient(ellipse at top, rgba(251,191,36,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #07070b 0%, #0a0a12 100%);
  border-bottom: 1px solid #1f1f26;
}
.resource-hero-inner {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start;
}
.resource-cover-preview:not(.cover-art) {
  background: linear-gradient(180deg, #12121a 0%, #0d0d14 100%);
  border: 1px solid #1f1f26; border-radius: 14px;
  aspect-ratio: 3/4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  position: sticky; top: 80px;
}
.resource-cover-icon { font-size: 4rem; }
.resource-cover-title { font-size: 0.9rem; color: #a1a1aa; text-align: center; padding: 0 1rem; font-weight: 600; }
.resource-info h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 0.75rem; }
.resource-info .resource-desc { font-size: 1.05rem; color: #d4d4d8; margin-bottom: 1.5rem; }
.resource-meta-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.resource-meta-item { font-size: 0.85rem; color: #71717a; }
.resource-meta-item strong { color: #fafafa; }
.resource-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.resource-section {
  max-width: 1000px; margin: 0 auto; padding: 3rem 2rem;
}
.resource-section h2 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.related-card {
  background: #0d0d14; border: 1px solid #1f1f26; border-radius: 10px;
  padding: 1.25rem; text-decoration: none; transition: border-color 0.2s;
}
.related-card:hover { border-color: rgba(251,191,36,0.3); text-decoration: none; }
.related-card .rc-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.related-card .rc-title { font-size: 0.85rem; color: #fafafa; font-weight: 600; }
.related-card .rc-cat { font-size: 0.72rem; color: #71717a; }

/* ---------- DASHBOARD ---------- */
.dash-grid {
  max-width: 1100px; margin: 0 auto; padding: 2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.dash-card {
  background: linear-gradient(180deg, #12121a 0%, #0d0d14 100%);
  border: 1px solid #1f1f26; border-radius: 14px; padding: 1.75rem;
}
.dash-card h3 { color: #fafafa; font-size: 1.05rem; margin-bottom: 1rem; }
.dash-card-full { grid-column: 1 / -1; }
.dash-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0;
  border-bottom: 1px solid #1f1f26; text-decoration: none;
}
.dash-item:last-child { border-bottom: none; }
.dash-item .di-icon { font-size: 1.3rem; }
.dash-item .di-title { font-size: 0.85rem; color: #fafafa; font-weight: 500; }
.dash-item .di-meta { font-size: 0.72rem; color: #71717a; margin-left: auto; }
.dash-item:hover .di-title { color: #fbbf24; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .resource-hero-inner { grid-template-columns: 1fr; }
  .resource-cover-preview { max-width: 200px; margin: 0 auto; position: static; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mem-hero { padding: 3.5rem 1.25rem 2rem; }
  .value-grid { grid-template-columns: 1fr; padding: 1rem 1.25rem; }
  .resource-section { padding: 2rem 1.25rem; }
  .unlock-modal { padding: 2rem 1.5rem; }
}
.global-footer-logo { width: 56px; height: auto; margin-bottom: 1rem; opacity: 0.8; }
.global-footer-brand { font-size: 1.05rem; color: #fafafa; font-weight: 600; margin-bottom: 0.4rem; }
.global-footer-tagline { font-size: 0.88rem; color: #71717a; font-style: italic; margin-bottom: 1.25rem; }
.footer-legal { font-size: 0.75rem; color: #52525b; max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  .topbar { padding: 0.75rem 1.25rem; }
  .topbar-brand span { display: none; }
  .hero { padding: 3.5rem 1.25rem 2.5rem; }
  .hero-stats { gap: 1.75rem; }
  .controls { padding: 2rem 1.25rem 0.5rem; }
  .grid { padding: 1rem 1.25rem 3rem; gap: 1.25rem; }
  .filters { gap: 0.4rem; }
  .filter-chip { font-size: 0.78rem; padding: 0.45rem 0.85rem; }
}