*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background:hsla(0,0%,100%,.95);backdrop-filter:blur(10px);position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 2px 20px rgba(0,0,0,.1)}.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.logo h1{color:#4f46e5;font-size:1.8rem;font-weight:700}.nav-links{display:flex;list-style:none;gap:2rem}.nav-links a{text-decoration:none;color:#4b5563;font-weight:500;transition:color .3s ease}.nav-links a:hover{color:#4f46e5}.hero{padding:120px 0 80px;text-align:center;color:#fff}.hero-title{font-size:3.5rem;font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.hero-subtitle{font-size:1.3rem;margin-bottom:2rem;opacity:.9}.cta-button{background:#ff6b6b;color:#fff;border:none;padding:15px 40px;font-size:1.1rem;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px hsla(0,100%,71%,.4)}.cta-button:hover{background:#ff5252;transform:translateY(-2px);box-shadow:0 6px 20px hsla(0,100%,71%,.6)}.upload-section{background:#fff;padding:80px 0;border-radius:30px 30px 0 0;margin-top:-30px;position:relative;z-index:1}.upload-section h3{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#1f2937}.upload-areas{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:3rem}.upload-area{text-align:center}.upload-box{border:3px dashed #d1d5db;border-radius:20px;padding:3rem 2rem;transition:all .3s ease;cursor:pointer;background:#f8fafc}.upload-box:hover{border-color:#4f46e5;background:#f0f4ff;transform:translateY(-5px)}.upload-box.dragover{border-color:#4f46e5;background:#e0e7ff}.upload-icon{font-size:3rem;margin-bottom:1rem}.upload-box p{font-size:1.2rem;font-weight:600;margin-bottom:1.5rem;color:#374151}.upload-box input[type=file]{display:none}.file-label{background:#4f46e5;color:#fff;padding:12px 30px;border-radius:25px;cursor:pointer;transition:all .3s ease;display:inline-block}.file-label:hover{background:#4338ca;transform:scale(1.05)}.file-info{margin-top:1rem;font-size:.9rem;color:#6b7280}.submit-btn{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none;padding:18px 50px;font-size:1.2rem;border-radius:50px;cursor:pointer;transition:all .3s ease;display:block;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(79,70,229,.4)}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,70,229,.6)}.submit-btn:disabled{opacity:.7}.loading-spinner{display:none;width:20px;height:20px;border:2px solid transparent;border-top:2px solid #fff;border-radius:50%;animation:spin 1s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}.submit-btn.loading .btn-text{opacity:0}.submit-btn.loading .loading-spinner{display:block}.notification{position:fixed;top:100px;right:30px;padding:20px 30px;border-radius:15px;color:#fff;font-weight:600;transform:translateX(400px);transition:transform .3s ease;z-index:1001;box-shadow:0 4px 20px rgba(0,0,0,.15)}.notification.show{transform:translateX(0)}.notification.success{background:#10b981}.notification.error{background:#ef4444}.features{padding:80px 0;background:#f8fafc}.features h3{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#1f2937}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.feature-card{background:#fff;padding:3rem 2rem;border-radius:20px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.1);transition:transform .3s ease}.feature-card:hover{transform:translateY(-10px)}.feature-icon{font-size:3rem;margin-bottom:1.5rem}.feature-card h4{font-size:1.5rem;margin-bottom:1rem;color:#1f2937}.feature-card p{color:#6b7280;line-height:1.6}.footer{background:#1f2937;color:#fff;text-align:center;padding:2rem 0}@media (max-width:768px){.nav-links{display:none}.hero-title{font-size:2.5rem}.features-grid,.upload-areas{grid-template-columns:1fr}.notification{right:20px;left:20px;transform:translateY(-100px)}.notification.show{transform:translateY(0)}}.file-details{text-align:left;background:#fff;padding:15px;border-radius:10px;border:1px solid #e5e7eb;margin-top:10px}.file-meta{margin-top:8px;font-size:.8rem}.file-meta span{display:block;margin-bottom:4px;color:#6b7280}.file-meta span:last-child{margin-bottom:0}.upload-box{position:relative}.upload-box.has-file{border-color:#10b981;background:#f0fdf4}.submit-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none!important;box-shadow:none!important}.notification{backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2)}.progress-container{margin:20px 0;text-align:center}.progress-bar{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background-color:#007bff;width:0;transition:width .3s ease}.progress-text{font-size:14px;color:#666}.results-section{margin-top:30px;padding:20px;background:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}.results-section h4{margin-bottom:15px;color:#333}.results-container{max-height:400px;overflow-y:auto;border:1px solid #ddd;border-radius:6px;background:#fff;padding:15px}.result-item{padding:12px;margin-bottom:10px;border-radius:6px;border-left:4px solid #007bff;background:#f8f9fa}.result-item.success{border-left-color:#28a745;background:#f8fff9}.result-item.error{border-left-color:#dc3545;background:#fff8f8}.result-file{font-weight:700;margin-bottom:5px}.result-class{color:#495057;margin-bottom:3px}.result-confidence{color:#6c757d;font-size:.9em}.result-message{margin-top:5px;font-style:italic;color:#868e96}.hidden{display:none!important}.defect-highlight{background-color:#ffebee;border:2px solid #f44336;border-radius:4px;padding:8px}.valid-highlight{text-align:left;background:#fff;padding:15px;border:2px solid #10b981;margin-top:10px}@media (min-width:769px){.menu-toggle{display:none!important}.nav-links{display:flex!important}}@media (max-width:768px){.file-details{padding:10px;font-size:.9rem}.upload-box{padding:2rem 1rem}.nav-links{display:none!important}.menu-toggle{display:block!important;background:none;border:none;font-size:24px;cursor:pointer;padding:10px 15px;z-index:1001}.nav-links.active{display:block!important;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.1)}}