/* ==================== Variables & Reset ==================== */
:root{--pink:#ff6b9d;--pink-light:#ffa0c0;--sky:#4ecdc4;--sky-light:#7ee8e0;--sunny:#ffd93d;--sunny-light:#ffe66d;--coral:#ff8a5c;--coral-light:#ffad85;--purple:#a78bfa;--purple-light:#c4b5fd;--green:#6bcb77;--bg-light:#fef9f0;--bg-card:rgba(255,255,255,0.85);--text-primary:#3d3d3d;--text-secondary:#6b6b6b;--glass:rgba(255,255,255,0.7);--glass-border:rgba(200,200,200,0.3);--shadow:0 8px 30px rgba(0,0,0,0.08);--radius:20px;--accent:var(--pink)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:linear-gradient(180deg,#fef9f0 0%,#fff5f8 30%,#f0faff 60%,#fef9f0 100%);color:var(--text-primary);overflow-x:hidden;min-height:100vh}

/* ==================== Particles Canvas ==================== */
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ==================== Loading Screen ==================== */
.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;background:linear-gradient(135deg,#fef9f0 0%,#fff5f8 50%,#f0faff 100%);display:flex;justify-content:center;align-items:center;transition:opacity 0.8s ease-out,visibility 0.8s}
.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loading-content{text-align:center;padding:20px;max-width:600px;width:100%}
.loading-title{font-size:clamp(28px,5vw,48px);font-weight:900;background:linear-gradient(135deg,var(--pink),var(--coral),var(--purple),var(--sky));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 3s ease-in-out infinite;margin-bottom:8px}
.loading-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:30px}
.loading-previews{display:flex;justify-content:center;gap:14px;margin-bottom:30px;flex-wrap:wrap}
.preview-card{text-align:center;opacity:0;animation:previewIn 0.5s ease-out forwards}
.preview-card:nth-child(1){animation-delay:0.1s}
.preview-card:nth-child(2){animation-delay:0.25s}
.preview-card:nth-child(3){animation-delay:0.4s}
.preview-card:nth-child(4){animation-delay:0.55s}
.preview-img{width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 4px 20px rgba(255,107,157,0.2);position:relative;background:linear-gradient(135deg,#ffe0ec,#e0f4ff)}
.preview-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.5s}
.preview-img img.loaded{opacity:1}
.preview-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--pink);background:linear-gradient(135deg,#ffe0ec,#e0f4ff);transition:opacity 0.5s}
.preview-img img.loaded~.preview-placeholder{opacity:0}
.preview-card span{display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--text-secondary)}
.loading-bar-wrap{width:200px;height:4px;background:rgba(0,0,0,0.06);border-radius:2px;margin:0 auto 16px;overflow:hidden}
.loading-bar{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--coral),var(--sky));border-radius:2px;transition:width 0.3s}
.loading-hint{font-size:12px;color:var(--text-secondary);opacity:0.6}
@keyframes previewIn{from{opacity:0;transform:translateY(15px) scale(0.8)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ==================== Photo Blur-Up ==================== */
.photo-card img{filter:blur(10px);transform:scale(1.05);transition:filter 0.6s ease-out,transform 0.6s ease-out}
.photo-card img.loaded{filter:blur(0);transform:scale(1)}
.photo-card:hover img.loaded{transform:scale(1.08)}

/* ==================== Keyframes ==================== */
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes expandLine{to{width:200px}}
@keyframes growLine{from{width:0}to{width:80%}}
@keyframes dropBounce{0%{opacity:0;transform:translateY(-40px) scale(0.5)}60%{opacity:1;transform:translateY(5px) scale(1.1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideFromLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideFromRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes floatText{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 10px))}}
@keyframes lightboxIn{from{opacity:0}to{opacity:1}}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
@keyframes musicPulse{0%,100%{box-shadow:0 4px 20px rgba(255,107,157,0.4)}50%{box-shadow:0 4px 30px rgba(255,107,157,0.7),0 0 0 8px rgba(255,107,157,0.15)}}
@keyframes markerPulse{0%{transform:translate(-50%,-50%) scale(0.8);opacity:0.8}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}

/* ==================== Header ==================== */
.header{position:relative;z-index:10;text-align:center;padding:80px 20px 40px}
.title-wrapper{position:relative;display:inline-block}
.main-title{font-size:clamp(32px,6vw,56px);font-weight:900;background:linear-gradient(135deg,var(--pink),var(--coral),var(--purple),var(--sky));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 5s ease-in-out infinite;letter-spacing:6px;position:relative}
.main-title::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--pink),var(--sky),var(--sunny),transparent);animation:expandLine 1.5s ease-out 0.5s forwards}
.subtitle{font-size:clamp(14px,2.5vw,18px);color:var(--text-secondary);margin-top:24px}

/* ==================== Timeline ==================== */
.timeline-section{position:relative;z-index:10;padding:30px 0 30px;overflow:visible}
.timeline{display:flex;justify-content:center;align-items:flex-start;position:relative;max-width:900px;margin:0 auto;padding:16px 20px 0}
.timeline::before{content:'';position:absolute;top:26px;left:10%;right:10%;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--coral),var(--green),var(--sky),var(--purple));transform:translateY(-50%);transform-origin:left;animation:growLine 2s ease-out 0.8s forwards;width:0}
.timeline-item{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;cursor:pointer;padding:0 24px}
.timeline-item:nth-child(1){animation:dropBounce 0.7s cubic-bezier(0.34,1.56,0.64,1) 1.2s both}
.timeline-item:nth-child(2){animation:dropBounce 0.7s cubic-bezier(0.34,1.56,0.64,1) 1.5s both}
.timeline-item:nth-child(3){animation:dropBounce 0.7s cubic-bezier(0.34,1.56,0.64,1) 1.8s both}
.timeline-item:nth-child(4){animation:dropBounce 0.7s cubic-bezier(0.34,1.56,0.64,1) 2.1s both}
.timeline-dot{width:22px;height:22px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,0.1);transition:all 0.3s;position:relative}
.timeline-item:nth-child(1) .timeline-dot{background:var(--coral)}.timeline-item:nth-child(2) .timeline-dot{background:var(--green)}.timeline-item:nth-child(3) .timeline-dot{background:var(--sky)}.timeline-item:nth-child(4) .timeline-dot{background:var(--purple)}
.timeline-dot::before{content:'';position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,157,0.3) 0%,transparent 70%);animation:dotGlow 2s ease-in-out infinite}
@keyframes dotGlow{0%,100%{transform:scale(0.8);opacity:0.3}50%{transform:scale(1.4);opacity:0.7}}
.timeline-item:hover .timeline-dot{transform:scale(1.4);box-shadow:0 4px 20px rgba(255,107,157,0.4)}
.timeline-item.active .timeline-dot{transform:scale(1.3);box-shadow:0 4px 20px rgba(255,107,157,0.5)}
.timeline-year{font-size:14px;font-weight:700;color:var(--text-primary);margin-top:14px;opacity:0;transition:color 0.3s}
.timeline-item:nth-child(odd) .timeline-year{animation:slideFromLeft 0.5s ease-out forwards;animation-delay:inherit}
.timeline-item:nth-child(even) .timeline-year{animation:slideFromRight 0.5s ease-out forwards;animation-delay:inherit}
.timeline-label{font-size:13px;color:var(--text-secondary);margin-top:4px;opacity:0;animation:fadeUp 0.4s ease-out forwards;animation-delay:inherit}
.timeline-item:hover .timeline-year{color:var(--pink)}
.timeline-item:hover .timeline-label{color:var(--text-primary)}

/* ==================== Map ==================== */
.map-section{position:relative;z-index:10;padding:40px 20px 80px;display:flex;justify-content:center;align-items:center;flex-direction:column}
.map-container{position:relative;width:min(90vw,700px);aspect-ratio:1.36;opacity:0;animation:fadeInScale 1.2s ease-out 2s forwards;background:rgba(255,255,255,0.4);border-radius:30px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.05)}
.map-container svg{width:100%;height:100%}
.map-legend{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.legend-item{display:flex;align-items:center;gap:10px;padding:10px 18px;background:#fff;border-radius:14px;border:2px solid var(--glass-border);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s;box-shadow:0 2px 10px rgba(0,0,0,0.05);overflow:hidden;position:relative}
.legend-item::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:left 0.5s}
.legend-item:hover::before{left:100%}
.legend-item:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,0.1)}
.legend-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:-0.5px}
.legend-text{line-height:1.2}
.legend-text b{color:var(--text-primary)}

/* ==================== Photo Section ==================== */
.photo-section{position:relative;z-index:10;padding:40px 20px 80px;max-width:1400px;margin:0 auto}
.section-header{text-align:center;margin-bottom:50px;position:relative}
.section-year{font-size:clamp(48px,8vw,80px);font-weight:900;color:rgba(255,107,157,0.06);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;animation:floatText 6s ease-in-out infinite}
.section-title{font-size:clamp(24px,4vw,36px);font-weight:800;position:relative;display:inline-block}
.section-title .year-tag{display:inline-block;color:#fff;padding:5px 16px;border-radius:25px;font-size:14px;font-weight:700;margin-right:12px;vertical-align:middle}
.photo-section:nth-of-type(1) .year-tag{background:linear-gradient(135deg,var(--coral),var(--pink))}
.photo-section:nth-of-type(2) .year-tag{background:linear-gradient(135deg,var(--green),var(--sky))}
.photo-section:nth-of-type(3) .year-tag{background:linear-gradient(135deg,var(--sky),var(--purple))}
.photo-section:nth-of-type(4) .year-tag{background:linear-gradient(135deg,var(--purple),var(--pink))}
.section-title .place-name{background:linear-gradient(135deg,var(--pink),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-desc{color:var(--text-secondary);margin-top:12px;font-size:15px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.8}

/* ==================== Photo Grid & Cards ==================== */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.photo-card{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;cursor:pointer;transition:opacity 0.5s,transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275),box-shadow 0.5s;opacity:0;transform:translateY(60px);box-shadow:0 4px 15px rgba(0,0,0,0.06)}
.photo-card.visible{opacity:1;transform:translateY(0)}
.photo-card:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 12px 40px rgba(255,107,157,0.15)}
.photo-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:left 0.6s;z-index:2}
.photo-card:hover::before{left:100%}
.photo-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 0.6s}
.photo-card:hover img{transform:scale(1.08)}
.photo-info{padding:16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.5));position:absolute;bottom:0;left:0;right:0;transform:translateY(20px);opacity:0;transition:all 0.3s}
.photo-card:hover .photo-info{transform:translateY(0);opacity:1}
.photo-info h4{font-size:14px;font-weight:600;margin-bottom:4px;color:#fff}
.photo-info p{font-size:12px;color:rgba(255,255,255,0.8)}

/* ==================== Placeholder Cards ==================== */
.photo-card.placeholder{background:#fff;border:3px dashed rgba(255,107,157,0.25);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:250px;transition:all 0.3s}
.photo-card.placeholder:hover{border-color:var(--pink);background:rgba(255,245,248,0.9);transform:translateY(-5px) scale(1.02)}
.placeholder-icon{font-size:48px;margin-bottom:12px;opacity:0.5}
.placeholder-text{font-size:13px;color:var(--text-secondary);text-align:center;line-height:1.6;padding:0 20px}
.placeholder-hint{font-size:11px;color:rgba(0,0,0,0.3);margin-top:8px}

/* ==================== Lightbox ==================== */
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);z-index:1000;display:none;justify-content:center;align-items:center;flex-direction:column;opacity:0;backdrop-filter:blur(20px)}
.lightbox.active{display:flex;animation:lightboxIn 0.4s ease-out forwards}
.lightbox-img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:16px;transition:opacity 0.25s ease;touch-action:none;will-change:transform}
.lightbox-close{position:absolute;top:20px;right:20px;width:48px;height:48px;background:rgba(255,255,255,0.15);border:none;border-radius:50%;color:#fff;font-size:26px;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;line-height:1}
.lightbox-close:hover{background:var(--pink);transform:rotate(90deg) scale(1.1)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background:rgba(255,255,255,0.15);border:none;border-radius:50%;color:#fff;font-size:20px;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(10px)}
.lightbox-nav:hover{background:rgba(255,255,255,0.3)}
.lightbox-prev{left:20px}.lightbox-next{right:20px}
.lightbox-caption{margin-top:16px;font-size:16px;color:rgba(255,255,255,0.7);text-align:center}
.lightbox-download{position:absolute;top:20px;right:84px;width:48px;height:48px;background:rgba(255,255,255,0.15);border:none;border-radius:50%;color:#fff;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center}
.lightbox-download:hover{background:rgba(255,255,255,0.3)}
.lightbox-download svg{width:20px;height:20px}

/* ==================== Scroll Progress & Back-to-Top ==================== */
.scroll-progress{position:fixed;top:0;left:0;height:4px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,var(--pink),var(--sky),var(--sunny),var(--green));z-index:1000;transition:width 0.1s;will-change:width}
.back-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:linear-gradient(135deg,var(--pink),var(--coral));border:none;border-radius:50%;color:#fff;cursor:pointer;z-index:100;opacity:0;transform:translateY(20px);transition:all 0.3s;box-shadow:0 4px 20px rgba(255,107,157,0.3);display:flex;align-items:center;justify-content:center}
.back-to-top svg{width:22px;height:22px;transition:transform 0.3s}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 8px 30px rgba(255,107,157,0.5)}
.back-to-top:hover svg{transform:translateY(-3px)}

/* ==================== Footer ==================== */
.footer{position:relative;z-index:10;text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:14px}
.footer-line{width:80px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--pink),var(--sky),var(--sunny));margin:0 auto 20px}

/* ==================== Ripple & Separators ==================== */
.ripple{position:absolute;border-radius:50%;background:rgba(255,107,157,0.2);transform:scale(0);animation:rippleAnim 0.6s linear;pointer-events:none}
.section-separator{height:2px;max-width:500px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--pink-light),var(--sky-light),var(--sunny-light),transparent);position:relative;z-index:10;border-radius:1px}

/* ==================== Share Button ==================== */
.share-btn{position:fixed;bottom:30px;left:90px;width:50px;height:50px;background:linear-gradient(135deg,var(--sky),var(--purple));border:none;border-radius:50%;color:#fff;cursor:pointer;z-index:100;box-shadow:0 4px 20px rgba(78,205,196,0.4);transition:all 0.3s;display:flex;justify-content:center;align-items:center}
.share-btn:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 8px 30px rgba(167,139,250,0.5)}
.share-btn svg{width:22px;height:22px}

/* ==================== Share Modal ==================== */
.share-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s;backdrop-filter:blur(5px)}
.share-modal.active{opacity:1;visibility:visible}

.share-card{background:#fff;border-radius:20px;width:340px;max-height:90vh;overflow:auto;position:relative;transform:scale(0.8) translateY(20px);transition:transform 0.3s;box-shadow:0 20px 60px rgba(0,0,0,0.15)}
.share-modal.active .share-card{transform:scale(1) translateY(0)}

.share-card-img{width:100%;height:300px;background:linear-gradient(135deg,#f0f0f0,#e8e8e8);border-radius:20px 20px 0 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.share-card-img img{width:100%;height:100%;object-fit:cover}
.share-img-placeholder{color:#bbb;font-size:16px}

.share-card-body{padding:24px 20px 20px;text-align:center}

.share-card-title{font-size:22px;font-weight:800;color:#333;margin-bottom:16px}

.share-card-divider{width:40px;height:2px;background:linear-gradient(90deg,var(--pink),var(--sky));margin:0 auto 20px;border-radius:1px}

.share-card-qr{display:flex;justify-content:center;margin-bottom:12px}
.share-card-qr canvas{display:block}

.share-card-url{font-size:12px;color:#999;text-align:center;padding:0 20px 16px;letter-spacing:1px}

.share-card-download{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 20px;width:calc(100% - 40px);padding:12px;background:linear-gradient(135deg,var(--pink),var(--coral));border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s}
.share-card-download:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,107,157,0.3)}
.share-card-download svg{width:16px;height:16px}

.share-card-close{position:absolute;top:12px;right:12px;width:32px;height:32px;background:rgba(255,255,255,0.2);border:none;border-radius:50%;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;backdrop-filter:blur(10px)}
.share-card-close:hover{background:rgba(255,255,255,0.4)}

@media(max-width:768px){
  .share-card{width:90%;max-width:340px}
  .share-card-img{height:250px}
  .share-card-title{font-size:20px;margin-bottom:14px}
}

/* ==================== Music Player ==================== */
.music-btn{position:fixed;bottom:30px;left:30px;width:50px;height:50px;background:linear-gradient(135deg,var(--pink),var(--coral));border:none;border-radius:50%;color:#fff;cursor:pointer;z-index:100;box-shadow:0 4px 20px rgba(255,107,157,0.3);transition:all 0.3s;display:flex;justify-content:center;align-items:center;overflow:hidden}
.music-btn:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 8px 30px rgba(255,107,157,0.5)}
.music-btn.playing{animation:musicPulse 1.5s ease-in-out infinite}
.music-icon{width:22px;height:22px;fill:#fff;position:absolute;transition:opacity 0.3s}
.music-btn.playing .music-icon{opacity:0}
.music-bars{display:flex;align-items:flex-end;gap:2px;height:16px;opacity:0;transition:opacity 0.3s}
.music-btn.playing .music-bars{opacity:1}
.music-bars span{width:3px;background:#fff;border-radius:1px;animation:musicBar 0.8s ease-in-out infinite alternate}
.music-bars span:nth-child(1){height:8px;animation-delay:0s}
.music-bars span:nth-child(2){height:14px;animation-delay:0.2s}
.music-bars span:nth-child(3){height:10px;animation-delay:0.4s}
.music-bars span:nth-child(4){height:6px;animation-delay:0.6s}
@keyframes musicBar{0%{height:4px}100%{height:16px}}

/* ==================== Scroll Reveal ==================== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s,transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ==================== Web端 (大屏) ==================== */
@media(min-width:1200px){
  .photo-grid{grid-template-columns:repeat(4,1fr);gap:24px}
  .map-container{width:min(80vw,900px)}
  .photo-section{padding:60px 40px 100px;max-width:1600px}
  .header{padding:100px 20px 50px}
  .main-title{letter-spacing:10px}
  .photo-card:hover{transform:translateY(-12px) scale(1.04);box-shadow:0 16px 50px rgba(255,107,157,0.2)}
}

/* ==================== Tablet端 ==================== */
@media(min-width:769px)and(max-width:1199px){
  .photo-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .map-container{width:min(85vw,700px)}
}

/* ==================== 手机端 ==================== */
@media(max-width:768px){
  .main-title{font-size:28px;letter-spacing:4px}
  .header{padding:50px 15px 25px}
  .subtitle{font-size:13px;margin-top:14px}
  .timeline{padding:0 4px;justify-content:space-around}
  .timeline-item{padding:0 6px}
  .timeline-label{display:block;font-size:11px}
  .timeline-year{font-size:11px}
  .timeline-dot{width:16px;height:16px}
  .photo-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .photo-card{border-radius:14px}
  .photo-card:hover{transform:translateY(-5px) scale(1.02)}
  .photo-card::before{display:none}
  .map-container{width:95vw;padding:12px;border-radius:20px}
  .map-legend{gap:8px;display:grid;grid-template-columns:repeat(2,1fr)}
  .legend-item{padding:8px 12px;font-size:12px;justify-content:center}
  .legend-icon{width:28px;height:28px;font-size:10px;border-radius:8px}
  .section-title{font-size:22px}
  .section-desc{font-size:13px;padding:0 10px}
  .section-year{font-size:40px}
  .photo-section{padding:30px 12px 60px}
  .section-header{margin-bottom:30px}
  .photo-info h4{font-size:12px}
  .photo-info p{font-size:11px}
  .photo-info{padding:10px}
  .placeholder-icon{font-size:36px}
  .placeholder-text{font-size:12px}
  .placeholder-hint{font-size:10px}
  .photo-card.placeholder{min-height:180px;border-width:2px}
  .lightbox-nav{width:40px;height:40px;font-size:16px}
  .lightbox-prev{left:10px}.lightbox-next{right:10px}
  .lightbox-close{top:10px;right:10px;width:40px;height:40px;font-size:20px}
  .lightbox-download{top:10px;right:62px;width:40px;height:40px}
  .lightbox-download svg{width:18px;height:18px}
  .back-to-top{bottom:20px;right:20px;width:42px;height:42px}
  .back-to-top svg{width:18px;height:18px}
  .share-btn{bottom:20px;left:72px;width:42px;height:42px}
  .share-btn svg{width:18px;height:18px}
  .music-btn{bottom:20px;left:20px;width:42px;height:42px}
  .music-icon{width:18px;height:18px}
  .footer{padding:40px 15px;font-size:12px}
}

/* ==================== 小屏手机 ==================== */
@media(max-width:480px){
  .main-title{font-size:22px;letter-spacing:2px}
  .subtitle{font-size:11px}
  .photo-grid{gap:8px}
  .section-title{font-size:18px}
  .section-year{font-size:32px}
  .timeline-item{padding:0 6px}
  .timeline-dot{width:16px;height:16px}
  .section-separator{max-width:80%}
  .photo-card{border-radius:12px}
}