.passport-photo-maker{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;max-width:1200px;margin:0 auto;padding:20px;color:#333;width:100%;box-sizing:border-box}.passport-hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:80px 20px;border-radius:15px;margin-bottom:40px;text-align:center;width:100%;box-sizing:border-box}.passport-hero-content h1{font-size:3rem;margin-bottom:20px;font-weight:700;line-height:1.2}.passport-hero-content p{font-size:1.2rem;margin-bottom:30px;opacity:.9;line-height:1.5}.hero-features{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}.feature{display:flex;align-items:center;gap:10px;font-size:1.1rem;background:rgb(255 255 255 / .1);padding:10px 20px;border-radius:25px}.feature-icon{font-size:1.3rem}.passport-tool-section{background:#f8f9fa;border-radius:15px;padding:40px;margin-bottom:40px;width:100%;box-sizing:border-box}.tool-container{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;width:100%}.upload-section{margin-bottom:20px;width:100%}.upload-area{border:3px dashed #dee2e6;border-radius:10px;padding:40px 20px;text-align:center;transition:all 0.3s ease;background:#fff;cursor:pointer;position:relative;width:100%;box-sizing:border-box}.upload-area:hover{border-color:#667eea;background:#f8f9ff}.upload-area.dragover{border-color:#667eea;background:#e3f2fd}#photoInput{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10}.upload-content .upload-icon{font-size:3rem;margin-bottom:15px}.upload-content h3{margin-bottom:10px;color:#333;font-size:1.3rem}.upload-content p{color:#666;margin-bottom:20px;font-size:1rem}.upload-btn{background:#667eea;color:#fff;border:none;padding:12px 30px;border-radius:25px;cursor:pointer;font-size:1rem;transition:background 0.3s ease;position:relative;z-index:5;min-height:44px}.upload-btn:hover{background:#5a6fd8}.file-info{margin-top:15px;display:none;width:100%}.file-info-content{background:#e8f5e8;padding:10px;border-radius:5px;border-left:4px solid #28a745;text-align:left;font-size:.9rem}.size-options{background:#fff;padding:25px;border-radius:10px;margin-top:5px;width:100%;box-sizing:border-box}.size-options h4{margin-bottom:15px;color:#333;font-size:1.2rem}.size-buttons{display:grid;grid-template-columns:1fr;gap:8px;max-height:300px;overflow-y:auto;padding:10px;border:1px solid #e9ecef;border-radius:8px;margin-bottom:15px;width:100%}.size-btn{padding:12px 15px;border:2px solid #e9ecef;background:#fff;border-radius:8px;cursor:pointer;transition:all 0.3s ease;font-size:.9rem;text-align:left;min-height:44px;display:flex;align-items:center}.size-btn:hover{border-color:#667eea;background:#f8f9ff}.size-btn.active{border-color:#667eea;background:#667eea;color:#fff}.size-info{background:#e3f2fd;padding:15px;border-radius:8px;text-align:center;width:100%;box-sizing:border-box}.size-info strong{color:#1976d2}.size-info span{font-weight:700;color:#667eea}.size-help{font-size:.85rem;color:#666;margin-top:5px}.tool-actions{display:flex;gap:15px;margin-top:25px;width:100%}.action-btn{flex:1;padding:15px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all 0.3s ease;font-weight:500;min-height:44px;display:flex;align-items:center;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn.secondary{background:#6c757d;color:#fff}.action-btn.secondary:hover:not(:disabled){background:#5a6268}.action-btn.primary{background:#28a745;color:#fff}.action-btn.primary:hover:not(:disabled){background:#218838}.tool-preview{background:#fff;border-radius:10px;padding:20px;box-shadow:0 4px 6px rgb(0 0 0 / .1);width:100%;box-sizing:border-box}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #e9ecef;width:100%}.preview-header h4{margin:0;color:#333;font-size:1.2rem}.preview-actions{display:flex;gap:15px;flex-wrap:wrap}.zoom-controls{display:flex;align-items:center;gap:8px;background:#f8f9fa;padding:5px 10px;border-radius:5px}.rotate-controls{display:flex;align-items:center;gap:3px;background:#f8f9fa;padding:5px 10px;border-radius:5px}.control-btn{width:35px;height:35px;border:1px solid #dee2e6;background:red;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;font-weight:700;font-size:1.1rem}.control-btn:hover{background:#667eea;color:#fff;border-color:#667eea}.zoom-level{min-width:50px;text-align:center;font-weight:500;font-size:.9rem}.preview-container{position:relative;width:100%;height:400px;border:2px solid #e9ecef;border-radius:10px;overflow:hidden;background:#f8f9fa;box-sizing:border-box}.image-container,.preview-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-container{display:none}.preview-placeholder{color:#6c757d;text-align:center;padding:20px}.placeholder-content{text-align:center}.placeholder-icon{font-size:3rem;margin-bottom:10px;opacity:.5}.placeholder-content p{margin-bottom:5px;font-weight:500;font-size:1.1rem}.placeholder-content small{opacity:.7;font-size:.9rem}#previewImage{max-width:100%;max-height:100%;display:block}.cropper-view-box{border-radius:0!important;outline:2px solid #667eea!important}.cropper-face{border-radius:0!important}.cropper-point{background-color:#667eea;border-radius:0}.cropper-line{background-color:#667eea}.passport-faq{background:#fff;border-radius:15px;padding:60px 40px;width:100%;box-sizing:border-box}.faq-container h2{text-align:center;margin-bottom:40px;font-size:2.5rem;color:#333;line-height:1.2}.faq-list{max-width:800px;margin:0 auto;width:100%}.faq-item{border-bottom:1px solid #e9ecef;margin-bottom:10px;width:100%}.faq-question{display:flex;justify-content:space-between;align-items:center;padding:20px 0;cursor:pointer;width:100%}.faq-question h3{margin:0;font-size:1.2rem;color:#333;font-weight:500;line-height:1.4;flex:1;padding-right:20px}.faq-toggle{font-size:1.5rem;color:#667eea;transition:transform 0.3s ease;flex-shrink:0}.faq-answer{padding:0 0 20px 0;display:none;width:100%}.faq-answer p{margin:0;color:#666;line-height:1.6;font-size:1rem}.faq-item.active .faq-toggle{transform:rotate(45deg)}.faq-item.active .faq-answer{display:block}.message-container{margin:15px 0;padding:15px;border-radius:8px;font-weight:500;border:1px solid;width:100%;box-sizing:border-box;text-align:center}.success-message{background:#d4edda;color:#155724;border-color:#c3e6cb}.error-message{background:#f8d7da;color:#721c24;border-color:#f5c6cb}@media (max-width:968px){.passport-photo-maker{padding:15px;margin:0 auto;position:relative}.tool-container{grid-template-columns:1fr;gap:30px;width:100%}.passport-hero-content h1{font-size:2.2rem}.hero-features{flex-direction:column;gap:15px;align-items:center}.feature{width:100%;max-width:300px;justify-content:center}}@media (max-width:768px){.passport-photo-maker{padding:10px;margin:0 auto;width:100%;position:relative;left:0;transform:none}.passport-hero{padding:40px 15px;margin-bottom:30px;border-radius:12px}.passport-hero-content h1{font-size:1.8rem;margin-bottom:15px}.passport-hero-content p{font-size:1rem;margin-bottom:20px}.passport-tool-section{padding:25px 15px;margin-bottom:30px;border-radius:12px}.preview-header{flex-direction:column;gap:15px;align-items:center;text-align:center}.preview-actions{justify-content:center;width:100%}.tool-actions{flex-direction:column;gap:10px}.upload-area{padding:30px 15px}.upload-content .upload-icon{font-size:2.5rem}.upload-content h3{font-size:1.2rem}.size-options{padding:20px 15px}}@media (max-width:480px){.passport-photo-maker{padding:8px;margin:0 auto;width:100%;min-width:320px;position:relative}.passport-hero-content h1{font-size:1.6rem}.passport-hero-content p{font-size:.9rem}.feature{font-size:1rem;padding:8px 15px}.faq-container h2{font-size:1.8rem;margin-bottom:30px}.faq-question h3{font-size:1.1rem}.size-buttons{max-height:200px}.preview-container{height:350px}.preview-actions{flex-direction:column;gap:10px;align-items:center}.zoom-controls,.rotate-controls{justify-content:center}.tool-preview{padding:15px}.passport-faq{padding:40px 20px}.faq-question{padding:15px 0}}@media (max-width:360px){.passport-photo-maker{padding:5px;margin:0 auto;width:100%;position:relative}.passport-hero{padding:30px 10px}.passport-hero-content h1{font-size:1.4rem}.passport-tool-section{padding:20px 10px}.upload-area{padding:25px 10px}.upload-content .upload-icon{font-size:2rem}.upload-btn{padding:10px 20px;font-size:.9rem}.size-options{padding:15px 10px}.size-btn{padding:10px 12px;font-size:.85rem}.preview-container{height:300px}.control-btn{width:32px;height:32px;font-size:1rem}}@media (max-height:700px) and (max-width:768px){.passport-hero{padding:30px 15px}.preview-container{height:300px}.size-buttons{max-height:150px}}@media (max-width:320px){.passport-photo-maker{min-width:300px;padding:5px}.passport-hero-content h1{font-size:1.3rem}.upload-content h3{font-size:1.1rem}.size-btn{font-size:.8rem}}@media (hover:none) and (pointer:coarse){.upload-btn:hover,.size-btn:hover,.action-btn:hover,.control-btn:hover{transform:none}.upload-area:hover{border-color:#dee2e6;background:#fff}.upload-area:active{border-color:#667eea;background:#f8f9ff}}@media print{.passport-photo-maker{max-width:none;padding:0}.passport-hero,.passport-faq,.tool-controls{display:none}.tool-preview{box-shadow:none;padding:0}}