/* R30 知识社群会员展示站 · 13色板 + 6场景 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.65;
  transition: background 0.35s, color 0.35s;
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
}
body.showcase-back-active { padding-top: calc(44px + env(safe-area-inset-top, 0)); }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

body[data-theme='kejilan'] { --primary:#4ECDC4; --accent:#2C5364; --bg:#F8FAFC; --bg-card:#FFF; --text:#1E293B; --text-light:#64748B; --border:#E2E8F0; --hero-grad:linear-gradient(135deg,#0F2027,#2C5364); --supply:#A8E6CF; --demand:#64B5F6; }
body[data-theme='shujuan'] { --primary:#8D6E63; --accent:#D7CCC8; --bg:#FFF8F0; --bg-card:#FFF; --text:#3E2723; --text-light:#795548; --border:#D7CCC8; --hero-grad:linear-gradient(135deg,#5D4037,#8D6E63); --supply:#C5E1A5; --demand:#90CAF9; }
body[data-theme='wennuan'] { --primary:#F48FB1; --accent:#FCE4EC; --bg:#FFF5F7; --bg-card:#FFF; --text:#880E4F; --text-light:#AD1457; --border:#F8BBD0; --hero-grad:linear-gradient(135deg,#F48FB1,#FCE4EC); --supply:#FFE0B2; --demand:#B3E5FC; }
body[data-theme='zhuanye'] { --primary:#546E7A; --accent:#CFD8DC; --bg:#F5F7FA; --bg-card:#FFF; --text:#263238; --text-light:#607D8B; --border:#CFD8DC; --hero-grad:linear-gradient(135deg,#37474F,#546E7A); --supply:#B0BEC5; --demand:#81D4FA; }
body[data-theme='hupo'] { --primary:#D4A853; --accent:#1A1A1A; --bg:#F9F6F0; --bg-card:#FFF; --text:#1A1A1A; --text-light:#5D4037; --border:#E0D5C5; --hero-grad:linear-gradient(135deg,#1A1A1A,#3D3225); --supply:#D4A853; --demand:#90CAF9; }
body[data-theme='senlin'] { --primary:#2E7D32; --accent:#C8E6C9; --bg:#F1F8E9; --bg-card:#FFF; --text:#1B5E20; --text-light:#388E3C; --border:#C8E6C9; --hero-grad:linear-gradient(135deg,#1B5E20,#2E7D32); --supply:#A5D6A7; --demand:#81D4FA; }
body[data-theme='jiangzi'] { --primary:#5B2C82; --accent:#E8D5F5; --bg:#FAF5FF; --bg-card:#FFF; --text:#4C1D95; --text-light:#7C3AED; --border:#DDD6FE; --hero-grad:linear-gradient(135deg,#311B92,#5B2C82); --supply:#CE93D8; --demand:#90CAF9; }
body[data-theme='rechen'] { --primary:#E65100; --accent:#FFCC80; --bg:#FFF8F0; --bg-card:#FFF; --text:#BF360C; --text-light:#E65100; --border:#FFCC80; --hero-grad:linear-gradient(135deg,#E65100,#FF9800); --supply:#FFCC80; --demand:#64B5F6; }
body[data-theme='jijing'] { --primary:#212121; --accent:#F5F5F5; --bg:#FFFFFF; --bg-card:#FAFAFA; --text:#212121; --text-light:#757575; --border:#E0E0E0; --hero-grad:linear-gradient(135deg,#424242,#212121); --supply:#E0E0E0; --demand:#BDBDBD; }
body[data-theme='haiyang'] { --primary:#0288D1; --accent:#B3E5FC; --bg:#F0F8FF; --bg-card:#FFF; --text:#01579B; --text-light:#0288D1; --border:#B3E5FC; --hero-grad:linear-gradient(135deg,#01579B,#0288D1); --supply:#80DEEA; --demand:#64B5F6; }
body[data-theme='shenlan'] { --primary:#64B5F6; --accent:#0D2137; --bg:#F8FAFC; --bg-card:#FFF; --text:#0D2137; --text-light:#546E7A; --border:#CFD8DC; --hero-grad:linear-gradient(135deg,#0D2137,#1A237E); --supply:#7986CB; --demand:#64B5F6; }
body[data-theme='chamo'] { --primary:#3E2723; --accent:#BCAAA4; --bg:#EFEBE9; --bg-card:#FFFDF7; --text:#3E2723; --text-light:#795548; --border:#D7CCC8; --hero-grad:linear-gradient(135deg,#3E2723,#5D4037); --supply:#BCAAA4; --demand:#90CAF9; }
body[data-theme='saibo'] { --primary:#00E5FF; --accent:#FF007F; --bg:#0A0A0A; --bg-card:#1A1A1A; --text:#E0FFFF; --text-light:#80DEEA; --border:#333; --hero-grad:linear-gradient(135deg,#0A0A0A,#FF007F); --supply:#00E676; --demand:#00E5FF; }

body[data-theme='saibo'] .hero { color: #fff; }
body[data-theme='wennuan'] .hero { color: #fff; }

.glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.section { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.section__title { font-size: 1.35rem; text-align: center; margin-bottom: 1.25rem; color: var(--primary); letter-spacing: 0.06em; }

.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; background: var(--hero-grad); background-size: cover; background-position: center; }
.hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.hero__content { position: relative; z-index: 1; padding: 2rem 1.5rem; animation: fadeUp .8s ease; }
.hero__logo {
  width: 5rem; height: 5rem; border-radius: 50%; margin: 0 auto 1rem;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  overflow: hidden;
}
.hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.hero__name { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 800; margin-bottom: .5rem; }
.hero__intro { font-size: 1rem; opacity: .88; max-width: 28rem; margin: 0 auto .35rem; }
.hero__tagline { font-size: .9rem; opacity: .7; margin-bottom: 1.75rem; font-style: italic; }
.hero-stats { display: flex; justify-content: center; gap: 0; margin-bottom: 1.75rem; flex-wrap: wrap; }
.hero-stat { padding: 0 1.25rem; border-left: 1px solid rgba(255,255,255,.25); }
.hero-stat:first-child { border-left: none; }
.hero-stat__value { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 800; line-height: 1.1; }
.hero-stat__label { font-size: .78rem; opacity: .75; margin-top: .2rem; }
.hero__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: 999px; font-weight: 700;
  background: var(--primary); color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.2);
  animation: bob 2s ease-in-out infinite;
}
.hero__scroll { display: block; margin-top: 1.5rem; font-size: .82rem; opacity: .65; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 会员墙 */
.wall-toolbar { margin-bottom: 1rem; }
.filter-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: .5rem; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0; padding: .35rem .85rem; border-radius: 999px; font-size: .78rem;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-light);
  white-space: nowrap; transition: all .15s;
}
.filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.wall-search-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.wall-search {
  flex: 1; padding: .6rem 1rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: .88rem;
}
.wall-search-clear { font-size: 1.1rem; color: var(--text-light); padding: .25rem .5rem; }
.view-toggle {
  width: 2.5rem; height: 2.5rem; border-radius: .65rem;
  border: 1px solid var(--border); background: var(--bg-card); font-size: 1.1rem;
}
.wall-count { font-size: .82rem; color: var(--text-light); margin-bottom: 1rem; }
.wall-reset { font-size: .78rem; color: var(--primary); margin-left: .5rem; text-decoration: underline; }

.member-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .member-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .member-grid { grid-template-columns: repeat(3, 1fr); } }
.member-grid.list-mode { grid-template-columns: 1fr; }

.member-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 1rem; cursor: pointer; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.member-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.member-card:hover .member-card__sd { box-shadow: inset 0 0 0 1px rgba(78,205,196,.25); }
.member-card__head { display: flex; gap: .75rem; align-items: center; margin-bottom: .65rem; }
.member-card__avatar {
  width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--primary); flex-shrink: 0;
}
.member-card__name { font-size: 1.15rem; font-weight: 700; }
.member-card__badge {
  display: inline-block; font-size: .65rem; padding: .1rem .45rem; border-radius: 999px;
  background: var(--primary); color: #fff; margin-left: .35rem; vertical-align: middle;
}
.member-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.member-tag { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; background: var(--border); color: var(--text-light); }
.member-card__intro { font-size: .82rem; color: var(--text-light); margin-bottom: .65rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.member-card__sd {
  padding: .65rem; border-radius: .65rem; background: rgba(0,0,0,.02);
  font-size: .75rem; transition: box-shadow .2s;
}
.member-card__sd-row { margin-bottom: .35rem; }
.member-card__sd-row:last-child { margin-bottom: 0; }
.member-card__sd-label { font-weight: 600; margin-right: .25rem; }
.supply-tag { color: #2E7D32; }
.demand-tag { color: #1565C0; }

.member-list-row {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem;
  cursor: pointer; transition: background .15s;
}
.member-list-row:hover { background: var(--border); }
.member-list-row__avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.member-list-row__main { flex: 1; min-width: 0; }
.member-list-row__name { font-weight: 700; font-size: .95rem; }
.member-list-row__meta { font-size: .78rem; color: var(--text-light); }
.member-list-row__intro { font-size: .78rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-light); }
.empty-state__icon { font-size: 2.5rem; margin-bottom: .5rem; }

/* 数据看板 */
.dashboard-charts { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .dashboard-charts { grid-template-columns: 1fr 1fr; align-items: start; } }
.pie-wrap { text-align: center; }
.pie-canvas { max-width: 280px; margin: 0 auto; }
.pie-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin-top: .75rem; font-size: .78rem; }
.pie-legend__item { display: flex; align-items: center; gap: .35rem; }
.pie-legend__dot { width: .65rem; height: .65rem; border-radius: 50%; }
.bar-chart { display: flex; flex-direction: column; gap: .65rem; }
.bar-row { display: grid; grid-template-columns: 3.5rem 1fr 2.5rem; gap: .5rem; align-items: center; font-size: .82rem; }
.bar-row__track { height: 1.35rem; background: var(--border); border-radius: 4px; overflow: hidden; }
.bar-row__fill { height: 100%; background: var(--primary); border-radius: 4px; width: 0; transition: width 1s cubic-bezier(.22,1,.36,1); }
.bar-row__pct { text-align: right; color: var(--text-light); font-size: .75rem; }

.timeline { position: relative; padding-left: 1.5rem; margin-top: 1.5rem; }
.timeline::before { content: ''; position: absolute; left: .35rem; top: 0; bottom: 0; width: 2px; background: var(--border); }
.timeline-item { position: relative; margin-bottom: 1.25rem; padding-left: 1rem; }
.timeline-item::before {
  content: ''; position: absolute; left: -1.15rem; top: .35rem;
  width: .75rem; height: .75rem; border-radius: 50%; background: var(--primary);
  border: 2px solid var(--bg-card); box-shadow: 0 0 0 2px var(--primary);
}
.timeline-item__date { font-size: .75rem; color: var(--text-light); }
.timeline-item__title { font-weight: 700; font-size: .92rem; }
.timeline-item__desc { font-size: .82rem; color: var(--text-light); }

.new-members { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
.new-members::-webkit-scrollbar { display: none; }
.new-member-mini {
  flex: 0 0 8rem; padding: .75rem; border-radius: .75rem;
  background: var(--bg-card); border: 1px solid var(--border); text-align: center; position: relative;
}
.new-member-mini__badge {
  position: absolute; top: .5rem; right: .5rem; font-size: .6rem; padding: .1rem .35rem;
  border-radius: 999px; background: #FF6B6B; color: #fff;
}
.new-member-mini__avatar { width: 3rem; height: 3rem; border-radius: 50%; margin: 0 auto .35rem; object-fit: cover; }
.new-member-mini__name { font-size: .85rem; font-weight: 700; }
.new-member-mini__meta { font-size: .7rem; color: var(--text-light); }

/* 展示卡 */
.showcase-card {
  max-width: 420px; margin: 0 auto; padding: 1.5rem; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.showcase-card__avatar { width: 7.5rem; height: 7.5rem; border-radius: 50%; margin: 0 auto 1rem; border: 3px solid var(--primary); object-fit: cover; }
.showcase-card__name { font-size: 1.5rem; font-weight: 800; margin-bottom: .35rem; }
.showcase-card__tags { font-size: .85rem; color: var(--text-light); margin-bottom: .75rem; }
.showcase-card__intro { font-size: .88rem; text-align: left; margin-bottom: 1rem; line-height: 1.7; }
.showcase-card__section { text-align: left; margin-bottom: .75rem; font-size: .82rem; }
.showcase-card__section-title { font-weight: 700; margin-bottom: .35rem; font-size: .78rem; color: var(--text-light); }
.showcase-card__identity { font-size: .78rem; color: var(--text-light); margin: 1rem 0; }

/* 资源墙 */
.resource-section { margin-bottom: 1.5rem; }
.resource-section__title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.resource-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.resource-tag {
  padding: .5rem .75rem; border-radius: .65rem; font-size: .78rem;
  cursor: pointer; transition: transform .15s;
}
.resource-tag--supply { background: rgba(168,230,207,.35); border: 1px solid var(--supply, #A8E6CF); }
.resource-tag--demand { background: rgba(100,181,246,.15); border: 1px solid var(--demand, #64B5F6); }
.resource-tag:hover { transform: scale(1.03); }
.resource-tag__name { font-weight: 600; display: block; }
.resource-tag__member { font-size: .68rem; opacity: .75; margin-top: .15rem; }

/* CTA */
.cta-section { text-align: center; padding: 2.5rem 1.25rem; background: var(--bg-card); border-top: 1px solid var(--border); }
.cta-section__title { font-size: 1.35rem; font-weight: 800; margin-bottom: .5rem; color: var(--primary); }
.cta-section__sub { color: var(--text-light); margin-bottom: 1.5rem; font-size: .92rem; }
.cta-qr-card {
  display: inline-block; padding: 1.25rem; border-radius: 1rem;
  background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.1); margin-bottom: 1rem;
}
.cta-qr-card img { width: 10rem; height: 10rem; object-fit: cover; margin: 0 auto .75rem; border-radius: .5rem; }
.cta-qr-card__label { font-weight: 600; margin-bottom: .25rem; }
.cta-qr-card__note { font-size: .78rem; color: var(--text-light); }
.cta-or { font-size: .82rem; color: var(--text-light); margin: 1rem 0; }

.site-footer { text-align: center; padding: 1.5rem 1rem 2rem; font-size: .78rem; color: var(--text-light); border-top: 1px solid var(--border); }

/* 详情浮层 */
.detail-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.detail-modal[hidden] { display: none; }
.detail-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.detail-modal__box {
  position: relative; background: var(--bg-card); border-radius: 1.25rem;
  padding: 1.5rem; max-width: 420px; width: 100%; max-height: 88vh; overflow-y: auto;
  animation: modalIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.detail-modal__close { position: absolute; top: .75rem; right: .75rem; font-size: 1.25rem; color: var(--text-light); z-index: 1; }
.detail-modal__avatar { width: 6rem; height: 6rem; border-radius: 50%; margin: 0 auto 1rem; display: block; border: 3px solid var(--primary); object-fit: cover; }
.detail-modal__name { text-align: center; font-size: 1.35rem; font-weight: 800; margin-bottom: .35rem; }
.detail-modal__meta { text-align: center; font-size: .85rem; color: var(--text-light); margin-bottom: .75rem; }
.detail-modal__intro { font-size: .88rem; line-height: 1.75; margin-bottom: 1rem; }
.detail-modal__tags { margin-bottom: 1rem; }
.detail-modal__contact { font-size: .85rem; padding: .75rem; border-radius: .65rem; background: var(--border); margin-bottom: 1rem; }
.detail-modal__actions { display: flex; flex-direction: column; gap: .5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .88rem; transition: transform .15s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; width: 100%; }
.btn-outline { border: 1.5px solid var(--primary); color: var(--primary); background: transparent; width: 100%; }

.modal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal__box { position: relative; background: var(--bg); border-radius: 1rem; padding: 1.25rem; max-width: 400px; width: 100%; text-align: center; border: 1px solid var(--border); }
.modal__close { position: absolute; top: .75rem; right: .75rem; font-size: 1.25rem; color: var(--text-light); }
.modal__preview { width: 100%; border-radius: .5rem; margin-bottom: .75rem; }
.modal__hint { font-size: .78rem; color: var(--text-light); }

.scene-panel, .theme-panel { position: fixed; z-index: 50; }
.scene-panel { bottom: calc(5.5rem + env(safe-area-inset-bottom)); left: 1rem; }
.theme-panel { bottom: calc(5.5rem + env(safe-area-inset-bottom)); right: 1rem; }
.scene-panel__toggle, .theme-panel__toggle {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: 1.25rem;
}
.scene-panel__list, .theme-panel__list {
  position: absolute; bottom: calc(100% + .5rem); left: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem;
  padding: .5rem; min-width: 10rem; max-height: 50vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.theme-panel__list { left: auto; right: 0; min-width: 8rem; }
.scene-panel__list button, .theme-panel__list button {
  display: block; width: 100%; text-align: left; padding: .45rem .65rem; border-radius: .4rem; font-size: .82rem; color: var(--text);
}
.scene-panel__list button.active, .theme-panel__list button.active,
.scene-panel__list button:hover, .theme-panel__list button:hover { background: var(--primary); color: #fff; }

.back-top {
  position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 40;
}
.back-top[hidden] { display: none; }

.contact-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.82); backdrop-filter: blur(8px); color: #fff; text-align: center;
}
.contact-footer__btns { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .35rem; }
.contact-footer__cta { padding: .45rem 1rem; border-radius: 999px; background: var(--primary, #4ECDC4); color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; }
.contact-footer__btn { padding: .45rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; background: transparent; font-size: .82rem; text-decoration: none; }
.contact-footer__brand { font-size: .68rem; opacity: .65; }
html.has-contact-footer body { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }