/* R64 人脉展示页 · 深空科技 P0 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Inter', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.55;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

body[data-theme='dark-space'] { --bg:#0A0E17; --bg-card:#111827; --bg-elevated:#1F2937; --primary:#0057FF; --accent:#00E5A0; --gold:#F5A623; --text:#F1F5F9; --text-muted:#94A3B8; --border:#1E293B; }
body[data-theme='warm-social'] { --bg:#1A1208; --bg-card:#231A0F; --bg-elevated:#2D2215; --primary:#F97316; --accent:#FBBF24; --gold:#F59E0B; --text:#FFF7ED; --text-muted:#FDBA74; --border:#78350F; }
body[data-theme='dark-gold'] { --bg:#0D0D0D; --bg-card:#1A1A1A; --bg-elevated:#262626; --primary:#D4AF37; --accent:#F5A623; --gold:#FFD700; --text:#FAFAFA; --text-muted:#A3A3A3; --border:#404040; }
body[data-theme='nature-green'] { --bg:#0A140E; --bg-card:#0F1A14; --bg-elevated:#16261C; --primary:#16A34A; --accent:#4ADE80; --gold:#CA8A04; --text:#ECFDF5; --text-muted:#86EFAC; --border:#166534; }
body[data-theme='minimal-mono'] { --bg:#FAFAFA; --bg-card:#FFFFFF; --bg-elevated:#F4F4F5; --primary:#18181B; --accent:#FACC15; --gold:#EAB308; --text:#18181B; --text-muted:#71717A; --border:#E4E4E7; }
body[data-theme='tech-cyan'] { --bg:#0B1220; --bg-card:#111827; --bg-elevated:#1E293B; --primary:#06B6D4; --accent:#22D3EE; --gold:#38BDF8; --text:#F0F9FF; --text-muted:#7DD3FC; --border:#334155; }

.page { max-width: 1100px; margin: 0 auto; }
.section { padding: 2rem 1rem; }
.section__title { font-size: 1.15rem; font-weight: 800; margin-bottom: .25rem; }
.section__sub { font-size: .82rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.2rem; border-radius: 10px; font-weight: 600; font-size: .88rem;
  border: none; cursor: pointer; min-height: 44px;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid color-mix(in srgb, var(--primary) 60%, var(--border)); color: var(--text); }
.btn-block { width: 100%; margin-top: .35rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.empty { text-align: center; color: var(--text-muted); padding: 2rem; }

/* Hero */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--primary) 25%, transparent), var(--bg));
}
.hero__glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  filter: blur(60px); top: 10%; left: 50%; transform: translateX(-50%);
}
.hero__content { position: relative; z-index: 1; padding: 2rem 1.25rem; width: 100%; text-align: center; }
.hero__avatar {
  width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 900; color: #fff;
  box-shadow: 0 0 40px color-mix(in srgb, var(--primary) 40%, transparent);
  border: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.hero__name { font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 900; margin-bottom: .35rem; }
.hero__title { font-size: .95rem; color: var(--accent); font-weight: 600; margin-bottom: .65rem; }
.hero__bio { font-size: .82rem; color: var(--text-muted); max-width: 28rem; margin: 0 auto 1.25rem; line-height: 1.6; }
.hero__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.25rem; max-width: 480px; margin-left: auto; margin-right: auto; }
@media (max-width: 480px) { .hero__kpis { grid-template-columns: 1fr; max-width: 200px; } }
.hero-kpi { padding: .65rem; background: color-mix(in srgb, var(--bg-card) 80%, transparent); border: 1px solid var(--border); border-radius: 12px; }
.hero-kpi__icon { font-size: 1.1rem; }
.hero-kpi__val { font-size: 1.35rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.hero-kpi__lbl { font-size: .68rem; color: var(--text-muted); }
.hero-kpi__trend { font-size: .62rem; color: var(--gold); font-weight: 700; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.hero__scroll { margin-top: 2rem; font-size: 1.2rem; opacity: .5; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Bento KPI */
.bento-grid { display: grid; gap: .75rem; }
.bento-kpi { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .bento-kpi { grid-template-columns: repeat(3, 1fr); } .bento-kpi .bento-large { grid-column: span 2; } }
.bento-charts { grid-template-columns: 1fr; margin-top: .75rem; }
@media (min-width: 768px) { .bento-charts { grid-template-columns: 1.4fr 1fr; } }
.bento-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; transition: transform .25s, box-shadow .25s; }
.bento-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.bento-kpi-card__icon { font-size: 1.25rem; }
.bento-kpi-card__val { font-size: 1.6rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; margin: .25rem 0; }
.bento-kpi-card__lbl { font-size: .72rem; color: var(--text-muted); }
.bento-kpi-card__trend { font-size: .68rem; font-weight: 700; margin-top: .25rem; }
.trend-up { color: var(--accent); }
.trend-flat { color: var(--gold); }
.bento-chart h3, .bento-tags h3 { font-size: .88rem; margin-bottom: .65rem; }
.chart-box { width: 100%; height: 260px; }
.chart-box--lg { height: 380px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-pill { padding: .35rem .65rem; border-radius: 999px; font-size: .72rem; background: color-mix(in srgb, var(--primary) 15%, var(--bg-elevated)); border: 1px solid var(--border); }

/* Graph filter */
.filter-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; overflow-x: auto; }
.filter-chip {
  padding: .45rem .75rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: .75rem; cursor: pointer; white-space: nowrap; min-height: 40px;
}
.filter-chip.active { border-color: var(--chip, var(--primary)); background: color-mix(in srgb, var(--chip, var(--primary)) 15%, var(--bg-card)); font-weight: 700; }
.bento-graph { padding: .5rem; }

/* Trust */
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
.logo-chip { padding: .65rem; text-align: center; font-size: .78rem; font-weight: 600; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; }
.quote-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
.quote-card { padding: 1rem; background: var(--bg-card); border-left: 3px solid var(--primary); border-radius: 0 10px 10px 0; font-size: .82rem; }
.quote-card cite { display: block; margin-top: .5rem; font-size: .72rem; color: var(--text-muted); font-style: normal; }

/* Connections */
.conn-grid { display: grid; grid-template-columns: 1fr; gap: .65rem; }
@media (min-width: 640px) { .conn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .conn-grid { grid-template-columns: repeat(3, 1fr); } }
.conn-card {
  display: flex; gap: .75rem; text-align: left; padding: .85rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; color: inherit; width: 100%; transition: border-color .2s, transform .2s;
}
.conn-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.conn-card__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--av, var(--primary)) 25%, var(--bg-elevated));
  color: var(--av, var(--primary)); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.conn-card h3 { font-size: .9rem; font-weight: 800; }
.conn-card p { font-size: .72rem; color: var(--text-muted); margin: .15rem 0; }
.conn-card__tag { font-size: .65rem; font-weight: 700; }
.conn-card__meta { font-size: .65rem; color: var(--text-muted); display: block; margin-top: .25rem; }

/* CTA */
.cta-box { padding: 1.5rem; text-align: center; background: linear-gradient(145deg, var(--bg-card), color-mix(in srgb, var(--primary) 10%, var(--bg-card))); border: 1px solid var(--border); border-radius: 16px; }
.cta-box h2 { font-size: 1.1rem; margin-bottom: .35rem; }
.cta-box p { font-size: .82rem; color: var(--text-muted); margin-bottom: 1rem; }

/* Detail modal */
.detail-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: flex-end; justify-content: center; }
.detail-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.detail-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto;
  background: var(--bg-card); border-radius: 1.25rem 1.25rem 0 0; padding: 1.5rem 1.25rem calc(5rem + env(safe-area-inset-bottom));
  transform: translateY(100%); animation: slideUp .35s forwards;
}
@keyframes slideUp { to { transform: translateY(0); } }
@media (min-width: 640px) {
  .detail-modal { align-items: center; }
  .detail-modal__panel { border-radius: 16px; max-height: 80vh; animation: fadeIn .3s forwards; transform: none; }
}
@keyframes fadeIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.detail-modal__close { position: absolute; top: .75rem; right: .75rem; background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; }
.detail-modal__avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .65rem; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; }
.detail-modal__panel h3 { text-align: center; font-size: 1.1rem; }
.detail-modal__meta { text-align: center; font-size: .78rem; color: var(--text-muted); margin: .25rem 0 .65rem; }
.detail-modal__tag { display: inline-block; padding: .25rem .55rem; border-radius: 999px; font-size: .72rem; background: color-mix(in srgb, var(--tag) 15%, transparent); border: 1px solid var(--tag); margin-bottom: .75rem; }
.detail-modal__stats { display: flex; gap: .5rem; margin-bottom: .75rem; }
.detail-modal__stats div { flex: 1; text-align: center; padding: .5rem; background: var(--bg-elevated); border-radius: 8px; font-size: .72rem; }
.detail-modal__stats strong { display: block; font-size: .95rem; color: var(--accent); }
.detail-modal__tags em { font-style: normal; font-size: .68rem; padding: .2rem .45rem; margin: .15rem; display: inline-block; background: var(--bg-elevated); border-radius: 6px; }
.detail-modal__highlights { padding-left: 1.1rem; font-size: .78rem; color: var(--text-muted); margin-bottom: 1rem; }

/* Lead modal */
.modal { position: fixed; inset: 0; z-index: 550; 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; z-index: 1; width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; }
.modal__box h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.modal__box label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .65rem; }
.modal__box input, .modal__box textarea { width: 100%; margin-top: .3rem; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); min-height: 44px; }

/* Theme */
.theme-panel { position: fixed; top: 5rem; right: .75rem; z-index: 200; }
.theme-panel__toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.theme-panel__list { position: absolute; right: 0; top: 100%; margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; max-width: 140px; }
.theme-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.theme-dot.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

.page-footer { text-align: center; padding: 1.5rem; font-size: .72rem; color: var(--text-muted); }

/* Share page */
.share-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.share-card { max-width: 400px; width: 100%; padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; text-align: center; }
.share-card__eyebrow { font-size: .72rem; color: var(--accent); font-weight: 700; margin-bottom: .5rem; }
.share-card h1 { font-size: 1.25rem; font-weight: 900; margin-bottom: .45rem; }
.share-card__desc { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.share-stats { display: flex; justify-content: space-around; margin: 1rem 0; padding: .85rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.share-stats strong { display: block; font-size: 1.1rem; color: var(--accent); }
.share-stats span { font-size: .68rem; color: var(--text-muted); }

/* P1 · 交互增强 */
.hero__bg, .hero__glow { will-change: transform; }
.reveal-card { opacity: 0; transform: translateY(20px); transition: opacity 400ms cubic-bezier(0.4,0,0.2,1), transform 400ms cubic-bezier(0.4,0,0.2,1); transition-delay: calc(var(--i, 0) * 60ms); }
.reveal-card.revealed { opacity: 1; transform: none; }

.progress-ring { text-align: center; padding: .5rem 0; }
.progress-ring svg { display: block; margin: 0 auto; }
.progress-ring__center { margin-top: -5.5rem; position: relative; z-index: 1; }
.progress-ring__val { display: block; font-size: 1.75rem; font-weight: 900; color: var(--accent); }
.progress-ring__lbl { font-size: .72rem; color: var(--text-muted); }
.progress-ring__hint { font-size: .65rem; color: var(--text-muted); margin-top: 4.5rem; }

.bento-viz { grid-template-columns: 1fr; margin-top: .75rem; }
@media (min-width: 768px) { .bento-viz { grid-template-columns: 1fr 1fr; } .bento-viz .bento-large { grid-column: span 2; } }
.bento-viz-card h3 { font-size: .88rem; margin-bottom: .65rem; }
.chart-box--heat { height: 180px; min-height: 160px; }

.heat-mobile { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; padding: .5rem 0; }
.heat-mobile__cell { padding: .55rem .25rem; border-radius: 8px; font-size: .68rem; text-align: center; font-weight: 600; }
.heat-mobile__cell.lv0 { background: #E2E8F0; color: #64748B; }
.heat-mobile__cell.lv1 { background: #BBF7D0; color: #166534; }
.heat-mobile__cell.lv2 { background: #4ADE80; color: #14532D; }
.heat-mobile__cell.lv3 { background: #16A34A; color: #fff; }
.heat-mobile__cell.lv4 { background: #15803D; color: #fff; }
.heat-mobile__legend { grid-column: 1 / -1; display: flex; align-items: center; gap: .35rem; font-size: .65rem; color: var(--text-muted); margin-top: .25rem; }
.heat-mobile__legend span { width: 14px; height: 14px; border-radius: 2px; display: inline-block; }

.visitor-stats { margin-top: 1rem; padding: 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; }
.visitor-stats__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem; margin-bottom: .65rem; font-size: .82rem; font-weight: 700; }
.visitor-stats__head small { font-weight: 400; font-size: .65rem; color: var(--text-muted); }
.visitor-stats__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .65rem; }
.visitor-stats__nums div { text-align: center; padding: .5rem; background: var(--bg-card); border-radius: 8px; }
.visitor-stats__nums strong { display: block; font-size: 1.1rem; color: var(--accent); }
.visitor-stats__nums span { font-size: .65rem; color: var(--text-muted); }
#visitor-mini-chart { height: 80px; width: 100%; }
.visitor-stats__sources { display: flex; flex-wrap: wrap; gap: .35rem; }
.visitor-src { font-size: .68rem; padding: .25rem .5rem; background: var(--bg-card); border-radius: 999px; border: 1px solid var(--border); }

.ops-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.ops-toolbar .btn { flex: 1; min-width: 140px; font-size: .78rem; }

.report-export-area { padding: .25rem 0; }

.poster-modal__box { max-width: 420px; }
.poster-wrap { margin: .75rem 0; overflow: auto; max-height: 50vh; text-align: center; }
.poster-wrap canvas { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); }
.tpl-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.tpl-chip { padding: .35rem .65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: .72rem; cursor: pointer; }
.tpl-chip.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, var(--bg-card)); font-weight: 700; }

.milestone-modal select, .milestone-modal textarea { width: 100%; margin-top: .3rem; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); }

.share-poster-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: left; }
.share-poster-panel h2 { font-size: .95rem; margin-bottom: .5rem; }

/* P2 · 预约 / 小程序 / Calendly */
.mp-banner {
  position: sticky; top: 0; z-index: 250;
  padding: .45rem 1rem; text-align: center; font-size: .72rem; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-card));
  border-bottom: 1px solid var(--border); color: var(--text);
}
.booking-durations { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.booking-dur {
  padding: .45rem .75rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: .75rem; cursor: pointer; min-height: 40px;
}
.booking-dur.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, var(--bg-card)); font-weight: 700; }
.booking-fallback { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); text-align: center; }
.booking-phone { display: inline-block; margin-top: .35rem; color: var(--accent); font-weight: 600; }
.calendly-modal .modal__box--wide { max-width: 520px; width: 100%; }
.modal__close { position: absolute; top: .65rem; right: .75rem; background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; }
.modal__hint { font-size: .78rem; color: var(--text-muted); margin-bottom: .65rem; }
.calendly-iframe-wrap { position: relative; width: 100%; min-height: 520px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.calendly-iframe-wrap iframe { width: 100%; height: 520px; border: 0; }

.contact-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(10,14,23,.95); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
}
.contact-footer__btns { display: flex; gap: .5rem; max-width: 480px; margin: 0 auto .35rem; }
.contact-footer__cta, .contact-footer__btn {
  flex: 1; text-align: center; padding: .55rem .4rem; border-radius: 8px;
  font-size: .78rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.contact-footer__cta { background: #c41e1e !important; color: #fff !important; }
.contact-footer__btn { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.contact-footer__brand { text-align: center; font-size: .62rem; color: var(--text-muted); }