/* ━━━ components.css ━━━ */
/* 红楼知己 · 公共组件样式（跨页面复用）*/
/* 版本：v1.0 | 日期：2026-04-18 */

/* ── 导航栏 topnav ── */
.topnav{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(12px);background:rgba(10,6,14,0.7);border-bottom:1px solid var(--color-gold-alpha-10)}
.topnav-brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.topnav-logo{width:28px;height:28px;border-radius:50%;flex-shrink:0}
.topnav-brand-text{font-family:'Noto Serif SC',Georgia,serif;font-size:16px;color:var(--color-gold-lt);letter-spacing:4px}
/* CTA按钮变体（landing页用） */
.topnav-cta{padding:7px 18px;background:var(--color-brand-alpha-20);border:1px solid var(--color-brand-alpha-40);border-radius:var(--radius-full);font-size:12px;color:var(--rose);cursor:pointer;text-decoration:none;transition:all .2s}
.topnav-cta:hover{background:var(--color-brand-alpha-35)}
/* 返回按钮变体（子页面用） */
.topnav-back{padding:7px 16px;border:1px solid var(--color-gold-alpha-30);border-radius:var(--radius-full);font-size:12px;color:var(--color-gold-alpha-70);transition:all .2s;flex-shrink:0;background:none;cursor:pointer;text-decoration:none}
.topnav-back:hover{border-color:var(--color-gold-alpha-60);color:var(--color-gold-lt)}

/* ── 分割线 divider ── */
.divider{text-align:center;padding:0 20px;margin:0 auto}
.divider-line{height:1px;background:linear-gradient(90deg,transparent,var(--color-gold-alpha-15),transparent)}
.divider-icon{font-size:20px;margin-top:-11px;display:inline-block;padding:0 16px;background:var(--color-bg);letter-spacing:4px}

/* ── 按钮 buttons ── */
.btn-primary{display:inline-block;padding:14px 36px;background:linear-gradient(135deg,var(--color-purple-alpha-60),var(--color-brand-alpha-50));border:1px solid var(--color-brand-alpha-40);border-radius:var(--radius-full);color:var(--color-heading);font-size:14px;letter-spacing:3px;text-decoration:none;transition:all .25s;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--color-brand-alpha-25)}}
.btn-secondary{display:inline-block;padding:13px 28px;border:1px solid var(--color-gold-alpha-25);border-radius:var(--radius-full);color:var(--color-gold-alpha-70);font-size:13px;letter-spacing:2px;text-decoration:none;transition:all .2s}
.btn-secondary:hover{border-color:var(--color-gold-alpha-50);color:var(--color-gold-lt)}

/* ── 页脚 footer ── */
.footer{padding:24px 0;border-top:1px solid var(--color-purple-alpha-15);text-align:center}
.footer-text{font-size:11px;color:var(--color-text-alpha-60);letter-spacing:2px}
.footer-text a{color:var(--color-gold-alpha-70);text-decoration:none}
.footer-text a:hover{color:var(--color-gold-lt)}

/* ── FAQ 折叠面板 ── */
.faq{padding:56px 0}
.faq-title{text-align:center;font-size:13px;color:var(--color-gold-alpha-45);letter-spacing:5px;margin-bottom:28px}
.faq-list{padding:0 20px;display:flex;flex-direction:column;gap:10px}
.faq-item{border-radius:var(--radius-md);border:1px solid var(--color-purple-alpha-10);background:var(--color-purple-alpha-03);overflow:hidden}
.faq-q{padding:16px 18px;font-size:13px;color:var(--color-text-alpha-75);letter-spacing:1px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
.faq-q::after{content:'＋';font-size:16px;color:var(--color-purple-alpha-40);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:13px;color:var(--color-text-alpha-45);line-height:1.9;padding:0 18px}
.faq-item.open .faq-a{max-height:200px;padding:0 18px 16px}

/* ── 在线人数背书 social-proof ── */
.hero-social-proof{font-size:12px;color:var(--color-gold-alpha-55);letter-spacing:2px;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.hero-social-proof b{font-size:16px;color:rgba(232,197,112,0.95);font-weight:700;letter-spacing:1px}
.hs-item{display:flex;align-items:center;gap:5px}
.hs-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.hs-dot-live{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,0.7);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)}}
.hs-sep{margin:0 2px}

/* ── 分享按钮 share ── */
.share-wrap{margin-top:20px}
.share-hint{font-size:11px;color:var(--color-text-alpha-25);letter-spacing:2px;margin-bottom:12px}
.share-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.share-btn{padding:8px 20px;border-radius:var(--radius-lg);font-size:12px;letter-spacing:2px;cursor:pointer;border:1px solid var(--color-purple-alpha-20);background:transparent;color:var(--color-text-alpha-45);transition:all .2s}
.share-btn:hover{border-color:var(--color-purple-alpha-40);color:var(--color-text-alpha-70)}