*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Montserrat,sans-serif;background:#fff;min-height:100vh;color:#333;overflow-x:hidden}.splash-screen{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:#015ece;z-index:9999;display:flex;align-items:center;justify-content:center;animation:splashFadeOut .8s ease-in-out 4.5s forwards}.splash-logo-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);animation:logoZoomAndFade 1.5s cubic-bezier(.68,-.55,.265,1.55) forwards;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1rem}.splash-logo{width:200px;height:auto;filter:drop-shadow(0 10px 30px rgba(0, 0, 0, .3))}.splash-logo-text{font-family:Montserrat,sans-serif;font-size:2rem;font-weight:700;color:#fff;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.3);opacity:0;animation:fadeInText .5s ease-out .5s forwards}@keyframes fadeInText{to{opacity:1}}.splash-background-container{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;animation:backgroundFadeIn .8s ease-in-out 1.5s forwards}.splash-background{width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(8px) brightness(.7);margin:-20px}.splash-qr-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;animation:qrFadeIn .8s ease-in-out 2.5s forwards;z-index:3;display:flex;flex-direction:column;align-items:center;gap:24px}.splash-qr{width:180px;height:180px;background:#fff;padding:20px;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.4)}.splash-qr-text{color:#fff;font-size:18px;font-weight:600;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.5);letter-spacing:.5px;line-height:1.4;max-width:300px;opacity:0;transform:translateY(10px);animation:textSlideUp .6s ease-out 3s forwards;font-family:Montserrat,sans-serif}@keyframes logoZoomAndFade{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}@keyframes backgroundFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes qrFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes textSlideUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}@keyframes splashFadeOut{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}.scanner-container{min-height:100vh;display:flex;flex-direction:column;opacity:0;animation:containerFadeIn .8s ease-in-out 4.8s forwards}@keyframes containerFadeIn{0%{opacity:0}100%{opacity:1}}.scanner-title{font-size:2rem;font-weight:600;color:#1f2937;text-align:center;margin-bottom:.5rem;font-family:Montserrat,sans-serif}.scan-status{position:absolute;top:1rem;right:1rem;z-index:10}.status-indicator{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}.status-indicator.inactive{background:#9ca3af}.status-indicator.scanning{background:#3b82f6;animation:pulse 2s ease-in-out infinite}.status-indicator.success{background:#10b981}.status-indicator.error{background:#ef4444}.status-indicator.active{background:#10b981;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.top-header{background:#fff;padding:1.5rem 1.5rem 1rem;display:flex;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.1)}.header-logo{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.header-logo img{height:40px;width:auto}.header-text{font-family:Montserrat,sans-serif;font-size:1.5rem;font-weight:700;color:#1a202c;margin:0;line-height:1}.header-text small{font-weight:400;color:#4a5568}.header-search{position:fixed;top:6rem;left:50%;transform:translateX(-50%);width:calc(100% - 2rem);max-width:1200px;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;z-index:90;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.15);backdrop-filter:blur(10px)}.header-search.hidden{display:none}.scanner-main{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:2rem;padding-bottom:6rem;padding-top:0;position:relative;z-index:1}.facilities-list-section{background:#fff;padding:0;margin-bottom:2rem;padding-top:4.5rem}.header-search>i{color:#9ca3af;font-size:1rem;flex-shrink:0}.header-search input{flex:1;border:none;background:0 0;outline:0;font-size:.9375rem;color:#1f2937;padding:.25rem .5rem}.header-search input::placeholder{color:#9ca3af}.header-filter-btn{background:#f3f4f6;border:none;border-radius:8px;padding:.5rem .75rem;cursor:pointer;color:#6b7280;font-size:1rem;transition:all .2s ease;flex-shrink:0}.header-filter-btn:hover{background:#e5e7eb}.facilities-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.facility-card{background:#fff;border:1px solid #e5e7eb;border-radius:1rem;overflow:hidden;cursor:pointer;transition:all .3s ease;box-shadow:0 1px 3px rgba(0,0,0,.1)}.facility-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}.facility-image{width:100%;height:180px;object-fit:cover;position:relative}.facility-status-badge{position:absolute;top:1rem;left:1rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.75rem;font-weight:600;text-transform:capitalize}.facility-status-badge.functioning{background:#10b981;color:#fff}.facility-status-badge.not-functioning{background:#ef4444;color:#fff}.facility-card-body{padding:1rem;display:grid;grid-template-columns:1fr auto;gap:.75rem}.facility-info{display:flex;flex-direction:column;gap:.5rem}.facility-name{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0;font-family:Montserrat,sans-serif}.facility-id{font-size:.875rem;color:#6b7280;display:flex;align-items:center;gap:.25rem}.facility-location{font-size:.875rem;color:#6b7280;display:flex;align-items:center;gap:.375rem}.facility-qr{width:60px;height:60px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.25rem;background:#fff}.facility-meta{display:flex;gap:1rem;font-size:.875rem;color:#6b7280}.facility-status{display:inline-block;padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:600;margin-top:.5rem}.facility-status.functioning{background:#dcfce7;color:#166534}.facility-status.not-functioning{background:#fee2e2;color:#991b1b}.map-view-section{background:#fff;padding:0;margin:0;position:absolute;top:0;left:0;right:0;bottom:5rem}.map-view-section.hidden{display:none}.facilities-map{width:100%;height:100%;border-radius:0;overflow:hidden;box-shadow:none;background:#aad3df}.facilities-map .leaflet-container{background:#aad3df}.leaflet-popup-content-wrapper{border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:0;overflow:hidden}.leaflet-popup-content{margin:0!important}.leaflet-container a.leaflet-popup-close-button{top:10px;right:10px;color:#fff;background:#000000a6;border-radius:100%}.leaflet-container a.leaflet-popup-close-button{font:16px/23px Tahoma,Verdana,sans-serif;color:#fff}.map-popup-content{width:280px;margin:0}.map-popup-image{width:100%;height:140px;background-size:cover;background-position:center;background-color:#f3f4f6;position:relative}.map-popup-body{padding:.5rem;background:#fff}.map-popup-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.75rem}.map-popup-title{font-size:1.125rem;font-weight:700;color:#1f2937;margin:0;font-family:Montserrat,sans-serif;flex:1;line-height:1.3}.map-popup-id{font-size:.75rem;color:#6b7280;background:#f3f4f6;padding:.25rem .625rem;border-radius:.5rem;font-weight:600;white-space:nowrap;font-family:monospace}.map-popup-location{font-size:.875rem;color:#6b7280;margin:0 0 1rem 0;display:flex;align-items:center;gap:.5rem}.map-popup-location i{color:#015ece;font-size:.875rem}.map-popup-footer{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.map-popup-status{display:inline-block;padding:.375rem .75rem;border-radius:.5rem;font-size:.75rem;font-weight:600;flex:1;text-align:center}.map-popup-status.functioning{background:#dcfce7;color:#166534;border:1px solid #86efac}.map-popup-status.not-functioning{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}.map-popup-view-btn{background:#015ece;color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:.875rem;cursor:pointer;font-family:Montserrat,sans-serif;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(1,94,206,.3)}.map-popup-view-btn:hover{background:#0147a8;transform:scale(1.05);box-shadow:0 4px 12px rgba(1,94,206,.4)}.scanner-section{background:#fff;padding:2rem;padding-top:3rem;margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:calc(100vh - 12rem)}.hidden{display:none}.scanner-wrapper{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:2rem auto 1.5rem;border-radius:1.25rem;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12);border:3px solid #015ece}#qr-reader{width:100%;height:100%;border-radius:1.25rem}.scanner-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border-radius:1.25rem}.scan-line{position:absolute;top:50%;left:10%;right:10%;height:3px;background:linear-gradient(90deg,transparent,#015ece,transparent);animation:scan 2s ease-in-out infinite;transform:translateY(-50%);box-shadow:0 0 10px rgba(1,94,206,.5)}@keyframes scan{0%{top:10%}50%{top:90%}100%{top:10%}}.scanner-controls{position:fixed;bottom:6rem;left:0;right:0;padding:1.5rem 2rem;background:linear-gradient(to top,#fff 80%,rgba(255,255,255,.95),transparent);z-index:50}.manual-btn,.scan-btn{padding:.875rem 1.75rem;border:none;border-radius:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.625rem;font-size:1rem;font-family:Montserrat,sans-serif}.scan-btn.active{background:linear-gradient(135deg,#015ece,#0147a8);color:#fff;box-shadow:0 4px 12px rgba(1,94,206,.3)}.scan-btn:disabled{background:#e5e7eb;color:#9ca3af;cursor:not-allowed}.manual-btn{width:100%;background:#015ece;color:#fff;padding:1rem 1.5rem;font-size:1.125rem;justify-content:center;box-shadow:0 4px 12px rgba(1,94,206,.3)}.manual-btn:hover{background:#0147a8;transform:translateY(-1px);box-shadow:0 6px 16px rgba(1,94,206,.4)}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;z-index:1000;backdrop-filter:blur(8px)}.modal.hidden{display:none}.modal-content{background:#fff;border-radius:1.25rem;padding:2rem;max-width:420px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.75rem}.modal-header h3{font-size:1.5rem;font-weight:700;color:#1f2937;font-family:Montserrat,sans-serif}.close-modal{background:#f3f4f6;border:none;font-size:1.25rem;color:#6b7280;cursor:pointer;padding:.5rem;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-modal:hover{background:#e5e7eb;color:#374151}.modal-body{display:flex;flex-direction:column;gap:1.25rem}.dpi-input{padding:.875rem 1rem;border:2px solid #e5e7eb;border-radius:.75rem;font-size:1rem;font-family:inherit;transition:all .2s ease}.dpi-input:focus{outline:0;border-color:#015ece;box-shadow:0 0 0 4px rgba(1,94,206,.1)}.lookup-btn{padding:.875rem 1.5rem;background:linear-gradient(135deg,#015ece,#0147a8);color:#fff;border:none;border-radius:.75rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.625rem;transition:all .3s ease;font-family:Montserrat,sans-serif;box-shadow:0 4px 12px rgba(1,94,206,.3)}.lookup-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(1,94,206,.4)}.result-section{background:#fff;position:relative;margin:0;padding:0;min-height:calc(100vh - 20rem)}.error-section.hidden,.result-section.hidden{display:none}.detail-hero{position:relative;width:100%;height:40vh;overflow:hidden}.detail-hero-image{width:100%;height:100%;object-fit:cover;border-radius:16px}.detail-back-btn{position:absolute;top:1rem;left:1rem;background:rgba(0,0,0,.5);color:#fff;border:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease;z-index:10}.detail-back-btn:hover{background:rgba(0,0,0,.7)}.detail-back-btn i{font-size:1.25rem}.detail-hero-overlay{position:absolute;right:0;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.3),transparent);padding:1rem;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:calc(100% - 2rem);left:1rem;bottom:1rem;border-radius:10px}.detail-facility-name{font-size:2rem;font-weight:700;margin:0 0 .5rem 0;font-family:Montserrat,sans-serif}.detail-facility-id{font-size:1.125rem;color:rgba(255,255,255,.9);margin:0 0 .75rem 0}.detail-facility-location{font-size:1rem;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:.5rem;margin:0}.detail-content{padding:2rem 1rem;overflow-y:auto}.detail-overview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.detail-overview-header h2{font-size:1.5rem;font-weight:700;color:#1f2937;margin:0;font-family:Montserrat,sans-serif}.detail-status-badge{padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:600;border:2px solid}.detail-status-badge.functioning{background:#dcfce7;color:#166534;border-color:#86efac}.detail-status-badge.not-functioning{background:#fee2e2;color:#991b1b;border-color:#fca5a5}.detail-description{color:#6b7280;font-size:1rem;line-height:1.7;margin-bottom:2rem}.complain-btn-container{position:fixed;bottom:6rem;left:0;right:0;padding:1.5rem 2rem;background:linear-gradient(to top,#fff 80%,rgba(255,255,255,.95),transparent);z-index:50}.complain-btn{width:100%;background:#015ece;color:#fff;border:none;padding:1rem 1.5rem;border-radius:1rem;font-size:1.125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:background .3s ease;font-family:Montserrat,sans-serif;box-shadow:0 4px 12px rgba(1,94,206,.3)}.complain-btn:hover{background:#0147a8}.complain-btn i{font-size:1.25rem}.complaint-section{background:#fff;min-height:100vh;padding:0}.complaint-section.hidden{display:none}.complaint-hero{position:relative;width:100%;height:40vh;overflow:hidden}.complaint-hero-image{width:100%;height:100%;object-fit:cover;border-radius:16px}.complaint-back-btn{position:absolute;top:1rem;left:1rem;background:rgba(0,0,0,.5);color:#fff;border:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease;z-index:10}.complaint-back-btn:hover{background:rgba(0,0,0,.7)}.complaint-back-btn i{font-size:1.25rem}.complaint-hero-overlay{position:absolute;right:0;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.3),transparent);padding:1rem;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:calc(100% - 2rem);left:1rem;bottom:1rem;border-radius:10px}.complaint-title{font-size:1.75rem;font-weight:700;margin:0 0 .5rem 0;font-family:Montserrat,sans-serif;color:#fff}.complaint-facility-id{font-size:1rem;color:rgba(255,255,255,.9);margin:0}.complaint-content{padding:2rem 1rem 8rem 1rem}.complaint-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-label{font-size:1rem;font-weight:600;color:#1f2937;font-family:Montserrat,sans-serif}.form-label .required{color:#ef4444}.form-textarea{width:100%;padding:1rem;border:1px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;color:#1f2937;resize:vertical;min-height:150px;transition:all .2s ease}.form-textarea::placeholder{color:#9ca3af}.form-textarea:focus{outline:0;border-color:#015ece;box-shadow:0 0 0 4px rgba(1,94,206,.1)}.upload-area{position:relative;border:2px dashed #e5e7eb;border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease}.upload-area:hover{border-color:#015ece;background:#f9fafb}.file-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload-content{display:flex;flex-direction:column;align-items:center;gap:.75rem}.upload-icon{width:48px;height:48px;background:#ebf5ff;color:#015ece;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin:0 auto;padding:12px}.upload-text{font-size:1rem;font-weight:600;color:#015ece;margin:0}.upload-info{font-size:.875rem;color:#6b7280;margin:0}.image-preview{position:relative;margin-top:1rem}.image-preview.hidden{display:none}.image-preview img{width:100%;max-height:300px;object-fit:cover;border-radius:8px}.remove-image-btn{position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.6);color:#fff;border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease}.remove-image-btn:hover{background:rgba(0,0,0,.8)}.submit-btn{width:100%;background:#015ece;color:#fff;border:none;padding:1rem 1.5rem;border-radius:12px;font-size:1.125rem;font-weight:600;cursor:pointer;font-family:Montserrat,sans-serif;box-shadow:0 4px 12px rgba(1,94,206,.3);transition:all .3s ease;margin-top:.5rem}.submit-btn:hover{background:#0147a8;transform:translateY(-2px);box-shadow:0 6px 16px rgba(1,94,206,.4)}.error-section{background:#fff;padding:3rem 2rem;display:flex;align-items:center;justify-content:center;min-height:50vh}.status-badge{display:inline-block;padding:.25rem .75rem;border-radius:1rem;font-size:.85rem;font-weight:600}.status-badge.functioning{background:#10b981;color:#fff}.status-badge.not-functioning{background:#ef4444;color:#fff}.jmp-status{background:#f59e0b;color:#fff}.jmp-status.basic-service{background:#10b981}.jmp-status.limited-service{background:#f59e0b}.jmp-status.no-service{background:#ef4444}.error-content{text-align:center;padding:2rem;max-width:400px}.error-content i{font-size:4rem;color:#ef4444;margin-bottom:1.5rem;display:block}.error-content h3{font-size:1.5rem;font-weight:600;color:#1f2937;margin-bottom:.75rem;font-family:Montserrat,sans-serif}.error-content p{color:#6b7280;font-size:1rem;line-height:1.6;margin-bottom:0}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;display:flex;justify-content:space-around;align-items:center;padding:.75rem 1rem;box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:1000}.nav-item{display:flex;align-items:center;justify-content:center;background:0 0;border:none;color:#9ca3af;cursor:pointer;transition:all .3s ease;padding:.75rem;min-width:48px}.nav-item:hover{color:#015ece}.nav-item.active{color:#015ece}.nav-item i{font-size:1.5rem}.nav-item.scanner-nav{position:relative;margin-top:-2rem}.scanner-circle{width:64px;height:64px;background:linear-gradient(135deg,#015ece,#0147a8);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(1,94,206,.4);border:4px solid #fff;transition:all .3s ease}.scanner-circle:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(1,94,206,.5)}.scanner-circle i{font-size:1.5rem;color:#fff}@media (max-width:768px){.scanner-main{padding:1rem;padding-bottom:6rem}.scanner-section{padding:1.5rem}.scanner-controls{flex-direction:column}.manual-btn,.scan-btn{width:100%;justify-content:center}.result-header{flex-direction:column;gap:1rem;text-align:center}.detail-grid{grid-template-columns:1fr}}