*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}.container{max-width:1200px;margin:0 auto;padding:0 20px}header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:60px 0;text-align:center;position:relative;overflow:hidden}.header-icons{position:absolute;top:20px;left:20px;gap:45px;z-index:2;display:flex;justify-content:center;gap:15px;margin-bottom:15px}.header-icon{height:35px;border-radius:0px}header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><path fill="%23ffffff" fill-opacity="0.1" d="M0,300 Q300,250 600,300 T1200,300 L1200,400 L0,400 Z"/></svg>');background-size:cover}h1{font-size:2.5rem;font-weight:700;margin-bottom:1rem;position:relative;z-index:1;text-shadow:2px 2px 4px rgba(0,0,0,0.3)}.subtitle{font-size:1.2rem;font-weight:400;position:relative;z-index:1;opacity:0.9}.timeline-nav{background:#2c3e50;color:white;padding:20px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,0.1)}.timeline-nav ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap}.timeline-nav li{margin:0 15px}.timeline-nav a{color:white;text-decoration:none;padding:10px 20px;border-radius:25px;transition:all 0.3s ease;display:inline-block}.timeline-nav a:hover{background:rgba(255,255,255,0.2)}.timeline-nav a.active{background:#3498db}.content-section{background:white;padding:80px 0;min-height:70vh}.showcase-content{text-align:center;max-width:800px;margin:0 auto}.showcase-content h2{font-size:2rem;color:#2c3e50;margin-bottom:2rem}.showcase-content p{font-size:1.1rem;line-height:1.8;color:#555;margin-bottom:2rem}.project-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:27px;justify-content:center;margin-top:30px;max-width:1200px;grid-auto-flow:dense}.project-card{background:white;border-radius:8px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,0.1);transition:all 0.3s ease;display:flex;flex-direction:column;width:165px;height:226px;box-sizing:border-box;overflow:hidden;cursor:pointer}.project-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.15)}.project-image{width:calc(100% + 24px);height:70px;object-fit:cover;margin-bottom:6px;flex-shrink:0;margin-left:-12px;margin-top:-12px;margin-right:-12px;border-radius:8px 8px 0 0}.project-title{font-size:12px;color:#5AB05C;margin-bottom:4px;font-weight:800;line-height:1.2;height:14px;flex-shrink:0;letter-spacing:0.5px;text-shadow:0 1px 2px rgba(0,0,0,0.1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card .project-description{color:#555;line-height:1.2;font-size:12px !important;margin-bottom:8px;height:88px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;text-overflow:ellipsis}.submit-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;transition:all 0.3s ease}.submit-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(102,126,234,0.4)}.submit-content{padding:20px}.plus-icon{font-size:48px;font-weight:bold;margin-bottom:10px;opacity:0.9}.submit-title{font-size:16px;font-weight:bold;margin-bottom:8px;color:white}.submit-description{font-size:12px;opacity:0.8;margin:0}.project-links{display:flex;justify-content:space-between;align-items:center;height:24px;flex-shrink:0}.gitee-link{background:#C71D23;color:white;border:none;padding:3px 6px;border-radius:8px;text-decoration:none;font-size:10px;transition:background 0.3s ease;white-space:nowrap;flex-shrink:0}.gitee-link:hover{background:#A0171C}.qr-modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5)}.qr-content{background-color:white;margin:3% auto;padding:50px;border-radius:25px;width:600px;max-width:95vw;text-align:center;position:relative;box-shadow:0 15px 50px rgba(0,0,0,0.25)}.close{position:absolute;right:15px;top:10px;font-size:24px;cursor:pointer;color:#999}.close:hover{color:#333}.share-header{text-align:center;margin-bottom:20px}.share-icons{display:flex;justify-content:center;gap:15px;margin-bottom:15px}.share-icon{height:25px;border-radius:0px}.share-title{font-size:20px;color:#2c3e50;margin:0;font-weight:bold}.divider{height:2px;background:linear-gradient(to right,#667eea,#764ba2);margin:25px 0;border-radius:1px}.project-info{margin:40px 0}.project-image-container{margin-bottom:15px}.modal-project-image{width:400px;height:280px;margin:0 auto;object-position:center;object-fit:cover;border-radius:15px;box-shadow:0 6px 25px rgba(0,0,0,0.15)}.modal-project-title{font-size:20px;color:#2c3e50;margin:15px 0 10px 0;font-weight:bold}.modal-project-description{font-size:14px;color:#666;line-height:1.5;margin:0;max-height:60px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.qr-section{margin:25px 0;display:flex;align-items:center;justify-content:center;gap:30px;position:relative}.qr-label{font-size:16px;color:#2c3e50;margin-bottom:15px;font-weight:bold}.qr-code-container{display:flex;justify-content:center;margin:8px 0}.qr-url{font-size:12px;color:#666;word-break:break-all;margin:10px 0;text-align:center}.open-source-text{max-width:300px;text-align:left}.open-source-text h3{font-size:20px;color:#2c3e50;margin:0 0 15px 0;font-weight:bold;line-height:1.4}.open-source-text p{font-size:14px;color:#666;margin:0;line-height:1.6}.qr-code-wrapper{text-align:center}.modal-action-buttons{position:absolute;bottom:20px;right:20px;display:flex;gap:8px;z-index:1000}.small-action-btn{width:24px;height:24px;border:none;border-radius:50%;background:#667eea;color:white;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.2);transition:all 0.3s ease}.small-action-btn:hover{background:#5a67d8;transform:scale(1.1)}.action-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:25px;font-size:13px;font-weight:bold;cursor:pointer;transition:all 0.3s ease;text-decoration:none}.download-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white}.download-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,0.4)}.copy-btn{background:#f8f9fa;color:#2c3e50;border:2px solid #e9ecef}.copy-btn:hover{background:#e9ecef;transform:translateY(-2px)}.back-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 15px rgba(102,126,234,0.4);z-index:1000;transition:all 0.3s ease}.back-to-top:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(102,126,234,0.6)}.back-to-top.show{display:flex}@media (hover:none) and (pointer:coarse){.project-card,.submit-card{transition:none}.project-card:active,.submit-card:active{transform:scale(0.98)}}@media (max-width:1024px){html{scroll-behavior:smooth}.project-grid{scroll-margin-top:80px}.timeline-nav{display:none}.header-icon{height:20px}.open-source-text h3{font-size:16px !important}.header-icons{top:15px;left:15px;gap:10px}.qr-content{margin:5% auto;padding:30px 20px;width:95vw;max-width:500px}.modal-project-image{width:100%;max-width:350px;position:center;height:auto;max-height:200px}.modal-project-title{font-size:18px;margin:15px 0 8px 0}.modal-project-description{font-size:13px;max-height:80px}.close{top:10px;right:10px;font-size:24px}.modal-action-buttons{padding:15px;gap:10px}.modal-action-buttons button{padding:8px 15px;font-size:13px}}.btn-icon{font-size:16px}.search-container{margin:30px 0;display:flex;flex-direction:column;gap:15px}.search-input-wrapper{display:flex;gap:10px;align-items:center}.search-input{flex:1;padding:12px 20px;border:2px solid #e9ecef;border-radius:25px;font-size:16px;outline:none;transition:all 0.3s ease}.search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1)}.search-btn{padding:12px 20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;border-radius:25px;cursor:pointer;font-size:16px;transition:all 0.3s ease}.search-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(102,126,234,0.4)}.search-info{display:flex;justify-content:space-between;align-items:center;padding:0 10px}.action-buttons{display:flex;gap:10px;justify-content:center;margin-top:10px}.submit-btn,.admin-btn{padding:10px 20px;border-radius:20px;text-decoration:none;font-weight:600;transition:all 0.3s ease;display:inline-block}.submit-btn{background:linear-gradient(135deg,#28a745 0%,#20c997 100%);color:white}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(40,167,69,0.4)}.admin-btn{background:linear-gradient(135deg,#6c757d 0%,#495057 100%);color:white}.admin-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(108,117,125,0.4)}.modal{display:flex;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);align-items:center;justify-content:center}.modal-content{background-color:white;margin:auto;padding:30px;border-radius:15px;width:90%;max-width:500px;position:relative;box-shadow:0 20px 40px rgba(0,0,0,0.2)}.modal-content .close{position:absolute;right:15px;top:15px;font-size:28px;font-weight:bold;cursor:pointer;color:#999}.modal-content .close:hover{color:#333}.modal-content h2{margin-bottom:20px;color:#333;text-align:center}.modal-content .form-group{margin-bottom:20px}.modal-content label{display:block;margin-bottom:8px;color:#333;font-weight:600}.modal-content input,.modal-content textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;transition:border-color 0.3s ease}.modal-content input:focus,.modal-content textarea:focus{outline:none;border-color:#667eea}.modal-content textarea{resize:vertical;min-height:100px}.modal-content .submit-btn{width:100%;padding:15px;background:linear-gradient(135deg,#28a745 0%,#20c997 100%);color:white;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:transform 0.3s ease}.modal-content .submit-btn:hover{transform:translateY(-2px)}.modal-content .submit-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}.modal-content .message{margin-top:15px;padding:10px;border-radius:8px;text-align:center;font-weight:600}.modal-content .message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.modal-content .message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.search-nav{display:flex;gap:10px}.nav-btn{padding:8px 12px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:20px;cursor:pointer;font-size:14px;transition:all 0.3s ease}.nav-btn:hover{background:#e9ecef}.nav-btn.active{background:#667eea;color:white;border-color:#667eea}.highlight-search{background-color:#fff3cd;border:2px solid #ffc107;transform:scale(1.05);box-shadow:0 8px 30px rgba(255,193,7,0.3);z-index:10}@media (max-width:1024px){.search-container{margin:20px 0}.search-input{padding:10px 15px;font-size:14px}.search-btn{padding:10px 15px;font-size:14px}.search-info{flex-direction:column;gap:10px;align-items:flex-start}.search-nav{align-self:stretch;justify-content:center}}#qrcode{margin:0 auto}@media (max-width:1024px){header{padding:40px 0}h1{font-size:1rem}.subtitle{font-size:1.1rem}.container{padding:0 15px}.content-section{padding:40px 0}.showcase-content h2{font-size:1.8rem}.showcase-content p{font-size:1rem}.timeline-nav{position:relative;padding:15px 0}.timeline-nav ul{flex-direction:column;align-items:center;gap:10px}.timeline-nav li{margin:0;width:100%;text-align:center}.timeline-nav a{display:block;padding:12px 20px;width:100%;max-width:300px}.project-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}.project-card{width:100%;height:auto;min-height:200px}.project-image{width:calc(100% + 24px);height:120px;margin-left:-12px;margin-top:-12px;margin-right:-12px}.project-title{font-size:14px;height:auto;margin-bottom:8px}.project-card .project-description{font-size:12px;height:80px;margin-bottom:8px}.plus-icon{font-size:36px}.submit-title{font-size:14px}.submit-subtitle{font-size:12px}.back-to-top{bottom:20px;right:20px;width:45px;height:45px;font-size:18px}}@media (max-width:480px){h1{font-size:1.8rem}.subtitle{font-size:1rem}.showcase-content h2{font-size:1.6rem}.project-grid{grid-template-columns:1fr;gap:12px}.project-card{min-height:180px}.project-image{height:120px}.project-title{font-size:13px}.project-card .project-description{font-size:11px;height:70px}.timeline-nav a{padding:10px 15px;font-size:0.9rem}.qr-content{margin:2% auto;padding:20px 15px;width:98vw;max-width:400px}.modal-project-image{max-width:300px;max-height:180px;position:center}.modal-project-title{font-size:16px}.modal-project-description{font-size:12px;max-height:70px}.close{font-size:20px}.modal-action-buttons button{padding:6px 12px;font-size:12px}}</style>