/* ================================================================
   R3 个人IP展示页 — 样式表
   13套色板 + 5品类布局 + 7模块 + 响应式 + 交互组件
   ================================================================ */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;line-height:1.6;color:var(--text);background:var(--bg);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}
video{max-width:100%}

/* ---------- 13套色板 ---------- */
:root,[data-theme="ocean"]{--primary:#0EA5E9;--primary-light:#E0F2FE;--accent:#F59E0B;--bg:#F8FAFC;--bg-card:#FFFFFF;--text:#1E293B;--text-light:#94A3B8;--border:#E2E8F0}
[data-theme="mint"]{--primary:#10B981;--primary-light:#D1FAE5;--accent:#F59E0B;--bg:#F9FAFB;--bg-card:#FFFFFF;--text:#1F2937;--text-light:#9CA3AF;--border:#E5E7EB}
[data-theme="sky"]{--primary:#3B82F6;--primary-light:#DBEAFE;--accent:#F97316;--bg:#F8FAFC;--bg-card:#FFFFFF;--text:#1E293B;--text-light:#94A3B8;--border:#E2E8F0}
[data-theme="navy"]{--primary:#1E40AF;--primary-light:#DBEAFE;--accent:#F59E0B;--bg:#0F172A;--bg-card:#1E293B;--text:#F1F5F9;--text-light:#64748B;--border:#334155}
[data-theme="sunset"]{--primary:#EA580C;--primary-light:#FFF7ED;--accent:#8B5CF6;--bg:#FFFBEB;--bg-card:#FFFFFF;--text:#292524;--text-light:#A8A29E;--border:#FED7AA}
[data-theme="coral"]{--primary:#F43F5E;--primary-light:#FFE4E6;--accent:#06B6D4;--bg:#FFF1F2;--bg-card:#FFFFFF;--text:#292524;--text-light:#9CA3AF;--border:#FECDD3}
[data-theme="lavender"]{--primary:#8B5CF6;--primary-light:#EDE9FE;--accent:#F59E0B;--bg:#FAFAFE;--bg-card:#FFFFFF;--text:#1E1B4B;--text-light:#A5B4FC;--border:#DDD6FE}
[data-theme="forest"]{--primary:#059669;--primary-light:#D1FAE5;--accent:#D97706;--bg:#F0FDF4;--bg-card:#FFFFFF;--text:#1A2E05;--text-light:#6B7280;--border:#BBF7D0}
[data-theme="amber"]{--primary:#D97706;--primary-light:#FEF3C7;--accent:#7C3AED;--bg:#FFFBEB;--bg-card:#FFFFFF;--text:#292524;--text-light:#A8A29E;--border:#FDE68A}
[data-theme="rose"]{--primary:#BE185D;--primary-light:#FCE7F3;--accent:#0D9488;--bg:#FFF1F2;--bg-card:#FFFFFF;--text:#292524;--text-light:#9CA3AF;--border:#FBCFE8}
[data-theme="slate"]{--primary:#475569;--primary-light:#F1F5F9;--accent:#0284C7;--bg:#F8FAFC;--bg-card:#FFFFFF;--text:#0F172A;--text-light:#94A3B8;--border:#CBD5E1}
[data-theme="neo"]{--primary:#000000;--primary-light:#F5F5F5;--accent:#FF3B30;--bg:#FFFFFF;--bg-card:#F7F7F7;--text:#000000;--text-light:#999999;--border:#E5E5E5;--brutal-shadow:4px 4px 0 #000}
[data-theme="sepia"]{--primary:#8B6914;--primary-light:#FEF3C7;--accent:#B45309;--bg:#FEFCE8;--bg-card:#FFFBEB;--text:#44403C;--text-light:#A8A29E;--border:#FDE68A}

/* ---------- Layout ---------- */
.page{min-height:100vh}
.section{padding:3rem 1rem;max-width:960px;margin:0 auto}
.section__header{text-align:center;margin-bottom:2rem}
.section__title{font-size:1.75rem;font-weight:800;color:var(--text);margin-bottom:0.35rem;letter-spacing:-0.02em}
.section__subtitle{font-size:0.95rem;color:var(--text-light)}

#app{overflow:hidden}

/* ---------- ① Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg--image{background:center/cover no-repeat}
.hero__bg--gradient{background:var(--hero-gradient)}
.hero__bg--video{position:absolute;inset:0}
.hero__bg--video video{width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 100%);z-index:1}
.hero__content{position:relative;z-index:2;text-align:center;color:#fff;padding:2rem 1rem}
.hero__avatar{width:100px;height:100px;border-radius:50%;border:3px solid rgba(255,255,255,.85);object-fit:cover;margin:0 auto 1rem;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.hero__name{font-size:2rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:0.25rem}
.hero__title{font-size:1.05rem;opacity:.9;font-weight:400}
.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:#fff;font-size:1.5rem;z-index:2;animation:heroBounce 2s infinite;opacity:.7}
@keyframes heroBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ---------- ② 关于我 ---------- */
.about__intro{max-width:640px;margin:0 auto 2rem;text-align:center;font-size:1.05rem;line-height:1.8;color:var(--text);position:relative}
.about__intro::before{content:'"';position:absolute;top:-1rem;left:-0.5rem;font-size:4rem;color:var(--primary);opacity:.15;font-family:Georgia,serif;line-height:1}
.about__stats{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.about__stat{text-align:center;min-width:100px}
.about__stat-value{font-size:2rem;font-weight:800;color:var(--primary)}
.about__stat-label{font-size:0.85rem;color:var(--text-light);margin-top:0.15rem}

/* ---------- ③ 服务 ---------- */
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.service-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.75rem 1.25rem;text-align:center;transition:transform .2s,box-shadow .2s}
.service-tile:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.08)}
.service-tile__icon{font-size:2.25rem;margin-bottom:0.75rem;display:block}
.service-tile__title{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:0.4rem}
.service-tile__desc{font-size:0.875rem;color:var(--text-light);line-height:1.5}
.services--4col .services__grid{grid-template-columns:repeat(4,1fr)}
.services--6col .services__grid{grid-template-columns:repeat(6,1fr)}

/* ---------- ④ 作品集 ---------- */
.portfolio__filters{display:flex;justify-content:center;gap:0.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.portfolio__filter{padding:0.4rem 1rem;border-radius:999px;font-size:0.85rem;font-weight:500;color:var(--text-light);background:var(--bg-card);border:1px solid var(--border);transition:all .2s}
.portfolio__filter.active,.portfolio__filter:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.portfolio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.portfolio__item{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--border)}
.portfolio__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.portfolio__item:hover img{transform:scale(1.05)}
.portfolio__item-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.7) 100%);display:flex;align-items:flex-end;padding:1rem;opacity:0;transition:opacity .3s}
.portfolio__item:hover .portfolio__item-overlay{opacity:1}
.portfolio__item-title{color:#fff;font-size:0.9rem;font-weight:600}
.portfolio__item-cat{color:rgba(255,255,255,.7);font-size:0.75rem}

/* 瀑布流模式 */
.portfolio--masonry .portfolio__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:180px;gap:0.75rem}
.portfolio--masonry .portfolio__item{aspect-ratio:auto;height:100%}
.portfolio--masonry .portfolio__item:nth-child(3n+1){grid-row:span 2}
.portfolio--masonry .portfolio__item:nth-child(3n+2){grid-row:span 1}
.portfolio--masonry .portfolio__item:nth-child(3n+3){grid-row:span 2}

/* 轮播模式 */
.portfolio--carousel{position:relative}
.portfolio--carousel .portfolio__filters{display:none}
.portfolio--carousel .portfolio__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:0;scrollbar-width:none}
.portfolio--carousel .portfolio__grid::-webkit-scrollbar{display:none}
.portfolio--carousel .portfolio__item{min-width:85vw;aspect-ratio:16/9;scroll-snap-align:center;border-radius:0}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.active{opacity:1;pointer-events:auto}
.lightbox__close{position:absolute;top:1rem;right:1rem;z-index:10;font-size:2rem;color:#fff;opacity:.7;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.lightbox__close:hover{opacity:1;background:rgba(255,255,255,.1)}
.lightbox__prev,.lightbox__next{position:absolute;top:50%;transform:translateY(-50%);z-index:10;font-size:2rem;color:#fff;opacity:.7;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.lightbox__prev:hover,.lightbox__next:hover{opacity:1;background:rgba(255,255,255,.1)}
.lightbox__prev{left:1rem}.lightbox__next{right:1rem}
.lightbox__body{max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:1rem}
.lightbox__img{max-width:90vw;max-height:65vh;object-fit:contain;border-radius:8px}
.lightbox__info{text-align:center;color:#fff}
.lightbox__info h3{font-size:1.15rem;margin-bottom:0.25rem}
.lightbox__info p{font-size:0.9rem;opacity:.75;margin-bottom:0.75rem}
.lightbox__link{display:inline-block;padding:0.5rem 1.5rem;background:var(--primary);color:#fff;border-radius:999px;font-size:0.875rem;font-weight:600}

/* ---------- ⑤ 社交聚合 ---------- */
.social__wechat{text-align:center;margin-bottom:1.5rem}
.social__wechat-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--primary-light);color:var(--primary);border-radius:999px;font-weight:600;font-size:0.95rem;transition:all .2s}
.social__wechat-btn:hover{background:var(--primary);color:#fff}
.social__platforms{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.social__platform-link{display:flex;flex-direction:column;align-items:center;gap:0.35rem;color:var(--text-light);font-size:0.8rem;transition:color .2s,transform .2s}
.social__platform-link:hover{color:var(--primary);transform:translateY(-2px)}
.social__platform-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;font-size:1.3rem}
.social__platform-icon svg{width:24px;height:24px;fill:currentColor}

/* ---------- QR弹窗 ---------- */
.qr-modal{position:fixed;inset:0;z-index:9980;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.qr-modal.active{opacity:1;pointer-events:auto}
.qr-modal__box{background:var(--bg-card);border-radius:20px;padding:2rem;text-align:center;max-width:320px;width:90%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.qr-modal__close{position:absolute;top:0.75rem;right:0.75rem;font-size:1.5rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-light)}
.qr-modal__close:hover{background:var(--border)}
.qr-modal__img{width:200px;height:200px;object-fit:contain;margin:0 auto 1rem;border:1px solid var(--border);border-radius:8px}
.qr-modal__id{font-size:0.85rem;color:var(--text-light)}
.qr-modal__title{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:0.25rem}

/* ---------- ⑥ 客户评价 ---------- */
.testimonials--carousel{position:relative;overflow:hidden}
.testimonials__track{display:flex;transition:transform .5s ease}
.testimonials__card{min-width:100%;padding:2rem;text-align:center}
.testimonials__card-avatar{width:56px;height:56px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;margin:0 auto 0.75rem}
.testimonials__card-quote{font-size:1rem;line-height:1.7;color:var(--text);margin-bottom:1rem;font-style:italic;max-width:560px;margin-left:auto;margin-right:auto}
.testimonials__card-quote::before{content:'"';color:var(--primary);opacity:.3;font-size:2.5rem;vertical-align:middle;margin-right:0.15rem}
.testimonials__card-quote::after{content:'"';color:var(--primary);opacity:.3;font-size:2.5rem;vertical-align:middle;margin-left:0.15rem}
.testimonials__card-name{font-weight:700;color:var(--text);font-size:0.95rem}
.testimonials__card-role{font-size:0.8rem;color:var(--text-light)}
.testimonials__dots{display:flex;justify-content:center;gap:0.5rem;margin-top:1rem}
.testimonials__dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .3s}
.testimonials__dot.active{background:var(--primary);width:24px;border-radius:999px}
.testimonials--grid .testimonials__track{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;flex:none}
.testimonials--grid .testimonials__card{min-width:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.5rem}

/* ---------- ⑦ CTA ---------- */
.cta{text-align:center;padding:3rem 1rem 4rem}
.cta__title{font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:0.5rem}
.cta__text{color:var(--text-light);margin-bottom:1.5rem;font-size:0.95rem}
.cta__qr{width:160px;height:160px;object-fit:contain;margin:0 auto 0.75rem;border:1px solid var(--border);border-radius:12px}
.cta__wechat{font-size:0.85rem;color:var(--text-light)}
.cta__actions{display:flex;justify-content:center;gap:0.75rem;flex-wrap:wrap;margin-top:1rem}

/* ---------- AI悬浮按钮 ---------- */
.ai-chat-btn{position:fixed;bottom:1.75rem;right:1.25rem;z-index:990;padding:0.75rem 1.25rem;background:var(--primary);color:#fff;border-radius:999px;font-weight:600;font-size:0.9rem;box-shadow:0 4px 20px rgba(0,0,0,.15);display:flex;align-items:center;gap:0.4rem;transition:transform .2s,box-shadow .2s}
.ai-chat-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(0,0,0,.2)}
.ai-chat-btn--hidden{display:none}

/* ---------- 返回顶部 ---------- */
.back-top{position:fixed;bottom:5.5rem;right:1.25rem;z-index:990;width:44px;height:44px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--text-light);box-shadow:0 2px 12px rgba(0,0,0,.08);opacity:0;pointer-events:none;transition:opacity .3s}
.back-top.visible{opacity:1;pointer-events:auto}

/* ---------- 品类主题差异 ---------- */

/* photographer: 暗色沉浸 + 轮播 */
[data-category="photographer"] .hero__overlay{background:rgba(0,0,0,.6)}
[data-category="photographer"] .section{max-width:1080px}
[data-category="photographer"] .about__intro{color:var(--text);font-size:1.1rem}

/* coach: 服务卡片加大 */
[data-category="coach"] .service-tile{padding:2rem 1.5rem}
[data-category="coach"] .service-tile__icon{font-size:2.75rem}
[data-category="coach"] .service-tile__desc{font-size:0.9rem}
[data-category="coach"] .services__grid{grid-template-columns:repeat(2,1fr);max-width:700px;margin:0 auto}

/* creator: 社交区C位 */
[data-category="creator"] .social__platforms{gap:2rem}
[data-category="creator"] .social__platform-icon{width:56px;height:56px;font-size:1.5rem}

/* general: 均衡 */
[data-category="general"] .portfolio__grid{grid-template-columns:repeat(3,1fr)}

/* ---------- neo 粗野主义覆盖 ---------- */
[data-theme="neo"] .service-tile,.testimonials__card,.qr-modal__box{border:2px solid var(--text);box-shadow:var(--brutal-shadow,4px 4px 0 #000);border-radius:8px}
[data-theme="neo"] .section__title{text-transform:uppercase;letter-spacing:0.05em}
[data-theme="neo"] .portfolio__item{border:2px solid var(--text);border-radius:0}

/* ---------- 响应式 ---------- */
@media (max-width:639px){
  .hero__name{font-size:1.6rem}
  .hero__title{font-size:0.9rem}
  .hero__avatar{width:80px;height:80px}
  .section{padding:2rem 1rem}
  .section__title{font-size:1.4rem}
  .services__grid{grid-template-columns:1fr 1fr;gap:0.75rem}
  .service-tile{padding:1.25rem 1rem}
  .portfolio__grid{grid-template-columns:1fr 1fr}
  .portfolio--masonry .portfolio__grid{grid-template-columns:1fr 1fr;grid-auto-rows:140px}
  .portfolio--masonry .portfolio__item:nth-child(2n+1){grid-row:span 2}
  .portfolio--masonry .portfolio__item:nth-child(2n+2){grid-row:span 1}
  .about__stats{gap:1.25rem}
  .about__stat-value{font-size:1.5rem}
  .about__stat-label{font-size:0.75rem}
  .testimonials--grid .testimonials__track{grid-template-columns:1fr}
  .social__platforms{gap:1rem}
  .social__platform-icon{width:38px;height:38px}
  .lightbox__prev{left:0.5rem}.lightbox__next{right:0.5rem}
  .ai-chat-btn{bottom:1rem;right:0.75rem;padding:0.6rem 1rem;font-size:0.8rem}
  .back-top{bottom:4.5rem;right:0.75rem}
  .portfolio__item:nth-child(n+7){display:none}
}
@media (min-width:640px) and (max-width:1023px){
  .section{max-width:720px}
  .services__grid{grid-template-columns:repeat(3,1fr)}
  .portfolio__grid{grid-template-columns:repeat(3,1fr)}
  .portfolio--masonry .portfolio__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:160px}
  .testimonials--grid .testimonials__track{grid-template-columns:repeat(2,1fr)}
  .hero__content{max-width:720px;margin:0 auto}
}
@media (min-width:1024px){
  .section{max-width:960px}
  .hero__content{text-align:left;max-width:960px;margin:0 auto;display:flex;align-items:center;gap:3rem}
  .hero__avatar{width:120px;height:120px;margin:0}
  .hero__text{flex:1}
  .portfolio__grid{grid-template-columns:repeat(4,1fr)}
  .portfolio--masonry .portfolio__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}
  .portfolio--masonry .portfolio__item:nth-child(4n+1),.portfolio--masonry .portfolio__item:nth-child(4n+4){grid-row:span 2}
  .portfolio--masonry .portfolio__item:nth-child(4n+2),.portfolio--masonry .portfolio__item:nth-child(4n+3){grid-row:span 1}
}

/* ---------- 编辑器模式样式 ---------- */
#app .em-editable{cursor:pointer;border-radius:4px;border:1px dashed rgba(33,150,243,.45);transition:border-color .15s}
#app .em-editable-img{cursor:pointer;outline:2px dashed rgba(33,150,243,.45);outline-offset:2px}

/* ---------- 隐藏类 ---------- */
.module-hidden{display:none!important}

/* ---------- 视频背景 ---------- */
@media(max-width:639px){.hero__bg--video video{display:none}.hero__bg--video{background:center/cover no-repeat}}

/* ---------- 主题色板面板 ---------- */
.theme-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9970;background:var(--bg-card);border-radius:20px;padding:1.25rem;box-shadow:0 20px 60px rgba(0,0,0,.25);max-width:340px;width:90%}
.theme-panel[hidden]{display:none!important}
.theme-panel__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;font-weight:700;font-size:0.95rem;color:var(--text)}
.theme-panel__close{font-size:1.25rem;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.theme-panel__close:hover{background:var(--border)}
.theme-panel__list{display:flex;flex-wrap:wrap;gap:0.5rem}
.theme-panel__swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;transition:transform .15s,box-shadow .15s;position:relative}
.theme-panel__swatch:hover{transform:scale(1.15);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.theme-panel__swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg-card),0 0 0 4px var(--text)}

/* 主题切换按钮 */
.theme-toggle{position:fixed;top:1rem;right:1rem;z-index:950;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:transform .2s}
.theme-toggle:hover{transform:scale(1.1)}
@media(min-width:1024px){.theme-toggle{top:1.5rem;right:1.5rem}}

/* 背景音乐按钮 */
.music-btn{position:fixed;top:4rem;right:1rem;z-index:950;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:1.05rem;transition:transform .2s}
.music-btn:hover{transform:scale(1.1)}
.music-btn.playing{background:var(--primary);color:#fff}
@media(min-width:1024px){.music-btn{top:calc(1.5rem + 48px);right:1.5rem}}