/* R36 知识IP展示站 · 13色板 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); transition: background .35s, color .35s; }
body.showcase-back-active { padding-top: calc(44px + env(safe-area-inset-top, 0)); }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

body[data-theme='ocean'] { --primary:#0EA5E9; --primary-light:#E0F2FE; --accent:#F59E0B; --bg:#F8FAFC; --bg-card:#FFF; --text:#1E293B; --text-light:#64748B; --border:#E2E8F0; --hero-overlay:rgba(15,23,42,.55); }
body[data-theme='mint'] { --primary:#10B981; --primary-light:#D1FAE5; --accent:#06B6D4; --bg:#F0FDF4; --bg-card:#FFF; --text:#064E3B; --text-light:#6B7280; --border:#D1FAE5; --hero-overlay:rgba(6,78,59,.5); }
body[data-theme='sky'] { --primary:#38BDF8; --primary-light:#E0F2FE; --accent:#818CF8; --bg:#F0F9FF; --bg-card:#FFF; --text:#0C4A6E; --text-light:#64748B; --border:#BAE6FD; --hero-overlay:rgba(12,74,110,.5); }
body[data-theme='navy'] { --primary:#1E3A5F; --primary-light:#E2E8F0; --accent:#D4A843; --bg:#F1F5F9; --bg-card:#FFF; --text:#1E293B; --text-light:#64748B; --border:#CBD5E1; --hero-overlay:rgba(30,58,95,.65); }
body[data-theme='sunset'] { --primary:#EA580C; --primary-light:#FFEDD5; --accent:#F59E0B; --bg:#FFF7ED; --bg-card:#FFF; --text:#431407; --text-light:#9A3412; --border:#FED7AA; --hero-overlay:rgba(67,20,7,.55); }
body[data-theme='coral'] { --primary:#F43F5E; --primary-light:#FFE4E6; --accent:#FB7185; --bg:#FFF1F2; --bg-card:#FFF; --text:#881337; --text-light:#BE123C; --border:#FECDD3; --hero-overlay:rgba(136,19,55,.45); }
body[data-theme='lavender'] { --primary:#8B5CF6; --primary-light:#EDE9FE; --accent:#A78BFA; --bg:#FAF5FF; --bg-card:#FFF; --text:#4C1D95; --text-light:#7C3AED; --border:#DDD6FE; --hero-overlay:rgba(76,29,149,.45); }
body[data-theme='forest'] { --primary:#059669; --primary-light:#D1FAE5; --accent:#84CC16; --bg:#ECFDF5; --bg-card:#FFF; --text:#064E3B; --text-light:#047857; --border:#A7F3D0; --hero-overlay:rgba(6,78,59,.5); }
body[data-theme='amber'] { --primary:#D97706; --primary-light:#FEF3C7; --accent:#FBBF24; --bg:#FFFBEB; --bg-card:#FFF; --text:#78350F; --text-light:#B45309; --border:#FDE68A; --hero-overlay:rgba(120,53,15,.55); }
body[data-theme='rose'] { --primary:#E11D48; --primary-light:#FFE4E6; --accent:#FB7185; --bg:#FFF1F2; --bg-card:#FFF; --text:#881337; --text-light:#BE123C; --border:#FECDD3; --hero-overlay:rgba(136,19,55,.45); }
body[data-theme='slate'] { --primary:#475569; --primary-light:#F1F5F9; --accent:#64748B; --bg:#F8FAFC; --bg-card:#FFF; --text:#0F172A; --text-light:#64748B; --border:#E2E8F0; --hero-overlay:rgba(15,23,42,.6); }
body[data-theme='neo'] { --primary:#6366F1; --primary-light:#EEF2FF; --accent:#22D3EE; --bg:#0F172A; --bg-card:#1E293B; --text:#F8FAFC; --text-light:#94A3B8; --border:#334155; --hero-overlay:rgba(15,23,42,.75); }
body[data-theme='sepia'] { --primary:#92400E; --primary-light:#FEF3C7; --accent:#059669; --bg:#FFFBEB; --bg-card:#FFFDF7; --text:#451A03; --text-light:#78716C; --border:#FDE68A; --hero-overlay:rgba(69,26,3,.55); }

.glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 4px 20px 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); font-weight: 800; }

.hero { position: relative; min-height: 92vh; min-height: 92dvh; display: flex; align-items: center; color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__geom { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 40%), radial-gradient(circle at 20% 80%, var(--primary), transparent 50%); opacity: .35; }
.hero__content { position: relative; z-index: 1; padding: 2rem 1.25rem; max-width: 960px; margin: 0 auto; width: 100%; animation: fadeUp .8s ease; }
.hero__row { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
@media (min-width: 768px) { .hero__row { flex-direction: row; text-align: left; align-items: center; } }
.hero__avatar { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.9); flex-shrink: 0; }
.hero__name { font-size: clamp(1.85rem, 6vw, 2.5rem); font-weight: 900; }
.hero__slogan { font-size: 1.05rem; opacity: .95; margin: .35rem 0; }
.hero__value { font-size: .85rem; opacity: .88; max-width: 28rem; line-height: 1.55; }
.hero__tags { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin: .75rem 0; }
@media (min-width: 768px) { .hero__tags { justify-content: flex-start; } }
.hero__tag { padding: .3rem .65rem; border-radius: 999px; background: rgba(255,255,255,.18); font-size: .75rem; backdrop-filter: blur(4px); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .88rem; border: none; cursor: pointer; background: var(--primary); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }

.stats-scroll { display: flex; gap: .65rem; overflow-x: auto; padding: .25rem 0 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.stats-scroll::-webkit-scrollbar { display: none; }
.stat-card { flex: 0 0 42%; min-width: 140px; scroll-snap-align: start; padding: 1rem; text-align: center; }
@media (min-width: 640px) { .stat-card { flex: 0 0 30%; } }
.stat-card__icon { font-size: 1.5rem; }
.stat-card__value { font-size: 1.35rem; font-weight: 800; color: var(--primary); margin: .35rem 0; }
.stat-card__label { font-size: .72rem; color: var(--text-light); }

.tab-row { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.tab-btn { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); font-size: .78rem; cursor: pointer; color: var(--text-light); }
.tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.content-list { display: grid; gap: .75rem; }
.content-card { display: flex; gap: .75rem; padding: .85rem; cursor: pointer; transition: transform .2s; }
.content-card:hover { transform: translateY(-2px); }
.content-card__cover { width: 5rem; height: 5rem; border-radius: .5rem; object-fit: cover; flex-shrink: 0; }
.content-card__title { font-weight: 700; font-size: .9rem; margin-bottom: .25rem; }
.content-card__meta { font-size: .72rem; color: var(--primary); font-weight: 600; }
.content-card__desc { font-size: .78rem; color: var(--text-light); margin-top: .25rem; }

.media-scroll { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.media-card { flex: 0 0 75%; max-width: 280px; scroll-snap-align: start; overflow: hidden; }
.media-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.media-card__body { padding: .75rem; }
.media-card__platform { font-size: .68rem; color: var(--primary); font-weight: 700; }

.kg-wrap { max-width: 100%; overflow-x: auto; padding: .5rem 0; }
.kg-svg { width: 100%; min-width: 320px; height: auto; display: block; }
.kg-node { cursor: pointer; transition: opacity .2s; }
.kg-node:hover { opacity: .85; }
.kg-detail { margin-top: 1rem; padding: 1rem; font-size: .85rem; color: var(--text-light); min-height: 3rem; }

.funnel-stack { display: grid; gap: .75rem; max-width: 520px; margin: 0 auto; }
.funnel-tier { padding: 1.25rem; position: relative; border-left: 4px solid var(--primary); }
.funnel-tier--paid { transform: scale(1.02); border-left-width: 5px; }
.funnel-tier--premium { transform: scale(1.04); border-left-color: var(--accent); }
.funnel-tier__icon { font-size: 1.5rem; }
.funnel-tier__name { font-weight: 800; font-size: 1.05rem; margin: .35rem 0; }
.funnel-tier__users { font-size: .78rem; color: var(--primary); font-weight: 600; margin: .35rem 0; }

.trust-logos { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.25rem; }
.trust-logos span { padding: .4rem .75rem; border: 1px solid var(--border); border-radius: .5rem; font-size: .78rem; font-weight: 600; }
.testimonial-scroll { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.testimonial-card { flex: 0 0 85%; max-width: 300px; padding: 1rem; scroll-snap-align: start; }
.testimonial-card__quote { font-size: .88rem; font-style: italic; color: var(--text-light); margin-bottom: .75rem; }
.timeline-mini { display: grid; gap: .5rem; margin-top: 1.25rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.timeline-mini-item { display: flex; gap: .75rem; font-size: .82rem; }
.timeline-mini-item strong { color: var(--primary); min-width: 3rem; }

.about-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.about-photo { border-radius: 1rem; width: 100%; max-width: 320px; margin: 0 auto; }
.about-block { margin-bottom: 1rem; }
.about-block h3 { font-size: .95rem; color: var(--primary); margin-bottom: .35rem; }
.about-block p { font-size: .88rem; color: var(--text-light); }
.about-highlights { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.about-highlights span { padding: .35rem .65rem; background: var(--primary-light, var(--bg)); color: var(--primary); border-radius: 999px; font-size: .75rem; font-weight: 600; }

.platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
@media (min-width: 640px) { .platform-grid { grid-template-columns: repeat(3, 1fr); } }
.platform-card { padding: 1rem; text-align: center; cursor: pointer; transition: transform .2s; }
.platform-card:hover { transform: translateY(-2px); }
.platform-card__icon { font-size: 1.5rem; }
.platform-card__name { font-weight: 700; font-size: .85rem; margin: .35rem 0 .15rem; }
.platform-card__desc { font-size: .68rem; color: var(--text-light); }
.wechat-box { text-align: center; margin: 1.25rem 0; padding: 1rem; }
.wechat-box img { width: 8rem; margin: 0 auto .5rem; border-radius: .5rem; }
.newsletter { display: flex; gap: .5rem; max-width: 400px; margin: 1rem auto 0; }
.newsletter input { flex: 1; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg); color: var(--text); }

.tool-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
.tool-card { padding: 1.25rem; }
.tool-card h3 { font-size: .95rem; font-weight: 800; margin-bottom: .35rem; }
.tool-card p { font-size: .78rem; color: var(--text-light); margin-bottom: .75rem; }
.reading-list { list-style: none; font-size: .82rem; color: var(--text-light); }
.reading-list li { padding: .35rem 0; border-bottom: 1px dashed var(--border); }
.reading-list li::before { content: '💭 '; }

.site-footer { text-align: center; padding: 2rem 1.25rem; font-size: .75rem; color: var(--text-light); }

.modal { position: fixed; inset: 0; z-index: 100; 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,.55); }
.modal__box { position: relative; background: var(--bg-card); border-radius: 1rem; padding: 1.25rem; max-width: 400px; width: 100%; max-height: 85vh; overflow-y: auto; }

.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,.12); font-size: 1.25rem; cursor: pointer; }
.scene-panel__list, .theme-panel__list { position: absolute; bottom: calc(100% + .5rem); background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem; padding: .5rem; min-width: 9rem; max-height: 50vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.15); }
.theme-panel__list { right: 0; left: auto; }
.scene-panel__list button, .theme-panel__list button { display: block; width: 100%; text-align: left; padding: .4rem .6rem; border-radius: .35rem; font-size: .8rem; color: var(--text); background: none; border: none; cursor: pointer; }
.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; z-index: 40; border: none; cursor: pointer; }
.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); 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, #EA580C); color: #fff; 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; cursor: pointer; }
.contact-footer__brand { font-size: .68rem; opacity: .65; }
html.has-contact-footer body { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }

body.share-page { padding-bottom: 2rem; }
.share-card { max-width: 360px; margin: 2rem auto; padding: 1.5rem; text-align: center; }