body{color:#333;background-color:#f5f5f5;font-family:PingFang SC,Microsoft YaHei,sans-serif;line-height:1.6}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}h1{color:#333;margin:0 0 40px;font-size:24px;font-weight:700}p{color:#666;margin:0}@media (width<=480px){h1{margin-bottom:30px;font-size:20px}}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f0f8ff;font-family:PingFang SC,Microsoft YaHei,sans-serif;line-height:1.6;overflow-x:hidden}.app{flex-direction:column;min-height:100vh;display:flex;position:relative}.app:before{content:"";z-index:-1;background:radial-gradient(circle at 10% 20%,#ffc0cb4d 0%,#0000 20%),radial-gradient(circle at 90% 30%,#add8e64d 0%,#0000 25%),radial-gradient(circle at 50% 80%,#ffd70033 0%,#0000 30%);width:100%;height:100%;position:absolute;top:0;left:0}.header{color:#fff;text-align:center;background:linear-gradient(135deg,#ff6b6b,#4ecdc4);padding:60px 20px;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000001a}.header:before{content:"";background:radial-gradient(circle,#ffffff1a 1px,#0000 1px) 0 0/30px 30px;width:200%;height:200%;animation:20s linear infinite float;position:absolute;top:-50%;left:-50%}.header-content{z-index:1;max-width:1200px;margin:0 auto;position:relative}.header-title-container{margin-bottom:15px;display:inline-block;position:relative}.header-title{text-shadow:3px 3px #0000001a;margin:0;font-size:48px;font-weight:700;animation:2s ease-in-out infinite bounce}.title-decoration{position:absolute;top:-20px;right:-40px}.decoration-circle{background-color:#ffeb3b;border-radius:50%;width:20px;height:20px;animation:2s ease-in-out infinite pulse;position:absolute;top:0;left:0}.decoration-star{border-bottom:17px solid #ff9800;border-left:10px solid #0000;border-right:10px solid #0000;width:0;height:0;animation:3s linear infinite spin;position:absolute;top:-10px;left:30px}.header-subtitle{opacity:.9;margin:0;font-size:20px;font-weight:500;animation:2s ease-in-out fadeIn}.main{flex:1;padding:60px 20px}section{background-color:#fff;border-radius:20px;max-width:800px;margin:0 auto 60px;padding:40px;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 8px 30px #0000001a}section:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000026}section:before{content:"";background:linear-gradient(90deg,#ff6b6b,#4ecdc4,#45b7d1);width:100%;height:5px;position:absolute;top:0;left:0}.section-title{color:#ff6b6b;text-align:center;text-shadow:2px 2px #0000000d;margin-bottom:30px;padding-bottom:15px;font-size:32px;font-weight:700;position:relative}.section-title:after{content:"";background:linear-gradient(90deg,#ff6b6b,#4ecdc4);border-radius:2px;width:100px;height:4px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.qr-section{text-align:center}.qr-card{background:linear-gradient(135deg,#fff,#f8f9fa);border:3px solid #4ecdc4;border-radius:20px;padding:40px;transition:transform .3s,box-shadow .3s;display:inline-block;position:relative;overflow:hidden;box-shadow:0 8px 25px #0000001a}.qr-card:hover{transform:translateY(-10px)scale(1.02);box-shadow:0 12px 35px #00000026}.qr-decorations{pointer-events:none;position:absolute;inset:10px}.decoration-item{border-radius:50%;width:30px;height:30px;animation:3s ease-in-out infinite float;position:absolute}.decoration-left{background:linear-gradient(45deg,#ff6b6b,#ff8e53);animation-delay:0s;top:10px;left:10px}.decoration-right{background:linear-gradient(45deg,#4ecdc4,#45b7d1);animation-delay:1.5s;bottom:10px;right:10px}.qr-code{background-color:#fff;border:2px solid #4ecdc4;border-radius:10px;width:250px;height:250px;margin-bottom:25px;padding:20px;transition:transform .3s;box-shadow:0 4px 15px #0000001a}.qr-code:hover{transform:scale(1.05)}.qr-text{color:#ff6b6b;text-shadow:1px 1px #0000000d;margin-bottom:15px;font-size:20px;font-weight:700;animation:2s ease-in-out infinite pulse}.qr-hint{color:#666;margin:0;font-size:16px}.contact-section{text-align:center}.contact-info{flex-direction:column;gap:20px;margin-top:30px;display:flex}.contact-item{background:linear-gradient(135deg,#f8f9fa,#fff);border:2px solid #4ecdc4;border-radius:15px;align-items:center;padding:20px;transition:transform .3s,box-shadow .3s;display:flex}.contact-item:hover{transform:translate(10px);box-shadow:0 6px 20px #0000001a}.contact-icon{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;margin-right:15px;font-size:20px;display:flex}.address-icon{background:linear-gradient(135deg,#ff6b6b,#ff8e53)}.email-icon{background:linear-gradient(135deg,#4ecdc4,#45b7d1)}.contact-label{color:#333;flex-shrink:0;margin-right:10px;font-size:16px;font-weight:700}.contact-value{color:#666;text-align:left;flex:1;font-size:16px}.footer{color:#fff;text-align:center;background:linear-gradient(135deg,#4ecdc4,#45b7d1);padding:40px 20px;position:relative;overflow:hidden}.footer:before{content:"";background:radial-gradient(circle,#ffffff1a 1px,#0000 1px) 0 0/20px 20px;width:200%;height:200%;animation:15s linear infinite reverse float;position:absolute;top:-50%;left:-50%}.footer-content{z-index:1;max-width:1200px;margin:0 auto;position:relative}.footer-decoration{justify-content:center;gap:15px;margin-bottom:20px;display:flex}.footer-decoration-item{background-color:#fffc;border-radius:50%;width:15px;height:15px;animation:2s ease-in-out infinite bounce}.footer-decoration-item:nth-child(2){animation-delay:.5s}.footer-decoration-item:nth-child(3){animation-delay:1s}.footer-text{opacity:.9;margin:0;font-size:16px;font-weight:500}@keyframes float{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-20px)rotate(180deg)}to{transform:translateY(0)rotate(360deg)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.header{padding:40px 20px}.header-title{font-size:36px}.main{padding:40px 20px}section{margin-bottom:40px;padding:30px 20px}.section-title{font-size:28px}.qr-code{width:200px;height:200px}.contact-item{text-align:center;flex-direction:column;gap:10px}.contact-icon,.contact-label{margin-right:0}.contact-value{text-align:center}}@media (width<=480px){.header-title{font-size:28px}.header-subtitle{font-size:16px}section{padding:20px}.section-title{font-size:24px}.qr-code{width:180px;height:180px}.qr-text{font-size:18px}.qr-hint{font-size:14px}.contact-item{padding:15px}.contact-value{font-size:14px}}