*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#000;color:#fff;overflow-x:hidden}.app-container{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#1a1a1a,#2d2d2d)}.nav-bar{display:flex;background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid hsla(0,0%,100%,.1);padding:0;position:-webkit-sticky;position:sticky;top:0;z-index:100}.nav-btn{flex:1 1;padding:16px 20px;background:transparent;color:hsla(0,0%,100%,.7);font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;border:none;border-bottom:3px solid transparent}.nav-btn:hover{background:hsla(0,0%,100%,.05);color:#fff}.nav-btn.active{color:#fff;background:hsla(0,0%,100%,.1);border-bottom-color:#007aff}.camera-view{flex:1 1;display:flex;flex-direction:column;position:relative}.camera-container{flex:1 1;position:relative;min-height:calc(100vh - 140px)}.camera-container,.camera-placeholder{display:flex;align-items:center;justify-content:center}.camera-placeholder{width:100%;height:100%;background:radial-gradient(circle,hsla(0,0%,100%,.05) 0,transparent 70%)}.placeholder-content{text-align:center;padding:40px 20px}.camera-icon{font-size:80px;margin-bottom:20px;opacity:.8}.placeholder-content h2{font-size:28px;font-weight:300;margin-bottom:12px;color:#fff}.placeholder-content p{font-size:16px;color:hsla(0,0%,100%,.7);margin-bottom:30px;line-height:1.5}.start-camera-btn{background:linear-gradient(135deg,#007aff,#0056cc);border:none;color:#fff;padding:16px 32px;border-radius:25px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px rgba(0,122,255,.3)}.start-camera-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(0,122,255,.4)}.start-camera-btn:active{transform:translateY(0)}.video-container{position:relative;display:flex;align-items:center;justify-content:center}.camera-video,.video-container{width:100%;height:100%;background:#000}.camera-video{object-fit:cover;border-radius:0;display:block;min-height:300px}.flash-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:hsla(0,0%,100%,.8);pointer-events:none;animation:flash .3s ease-out}@keyframes flash{0%{opacity:0}50%{opacity:1}to{opacity:0}}.camera-controls{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);gap:20px;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:15px 25px;border-radius:50px;border:1px solid hsla(0,0%,100%,.1)}.camera-controls,.control-btn{display:flex;align-items:center}.control-btn{width:50px;height:50px;border-radius:50%;border:none;background:hsla(0,0%,100%,.2);color:#fff;font-size:20px;cursor:pointer;transition:all .3s ease;justify-content:center}.control-btn:hover{background:hsla(0,0%,100%,.3);transform:scale(1.1)}.capture-btn{width:70px;height:70px;border-radius:50%;border:4px solid #fff;background:linear-gradient(135deg,#007aff,#0056cc);color:#fff;font-size:28px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,122,255,.4)}.capture-btn:hover{transform:scale(1.1);box-shadow:0 6px 25px rgba(0,122,255,.5)}.capture-btn:active{transform:scale(.95)}.gallery-view{flex:1 1;padding:20px;min-height:calc(100vh - 80px)}.gallery-header{text-align:center;margin-bottom:30px;padding:20px 0}.gallery-header h2{font-size:28px;font-weight:300;margin-bottom:8px;color:#fff}.gallery-header p{font-size:16px;color:hsla(0,0%,100%,.7)}.empty-gallery{height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center}.empty-content{text-align:center;padding:40px 20px}.empty-icon{font-size:80px;margin-bottom:20px;opacity:.6}.empty-content h3{font-size:24px;font-weight:300;margin-bottom:12px;color:#fff}.empty-content p{font-size:16px;color:hsla(0,0%,100%,.7);margin-bottom:30px;line-height:1.5}.back-to-camera-btn{background:linear-gradient(135deg,#34c759,#28a745);border:none;color:#fff;padding:14px 28px;border-radius:22px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px rgba(52,199,89,.3)}.back-to-camera-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(52,199,89,.4)}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:15px;gap:15px;padding:0 10px}.photo-item{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:hsla(0,0%,100%,.05);transition:all .3s ease}.photo-item:hover{box-shadow:0 8px 25px rgba(0,0,0,.3)}.photo-image{width:100%;height:100%;object-fit:cover;transition:all .3s ease}.photo-overlay{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600;color:#fff}@media (max-width:768px){.nav-btn{padding:14px 16px;font-size:15px}.camera-icon{font-size:60px}.placeholder-content h2{font-size:24px}.start-camera-btn{padding:14px 28px;font-size:16px}.camera-controls{bottom:20px;padding:12px 20px;gap:15px}.control-btn{width:45px;height:45px;font-size:18px}.capture-btn{width:65px;height:65px;font-size:26px}.gallery-view{padding:15px}.photo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;padding:0 5px}}@media (max-width:480px){.placeholder-content{padding:30px 15px}.camera-icon{font-size:50px}.placeholder-content h2{font-size:22px}.gallery-header h2{font-size:24px}.photo-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}}.back-to-camera-btn,.camera-video,.capture-btn,.control-btn,.nav-btn,.photo-image,.start-camera-btn{will-change:transform}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.flip-btn{background:hsla(0,0%,100%,.2)!important}.flip-btn:hover{background:hsla(0,0%,100%,.3)!important;transform:scale(1.1) rotate(180deg)}.photo-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:center;z-index:1000;padding:20px;animation:modalFadeIn .3s ease-out}.modal-content,.photo-modal{display:flex;align-items:center}.modal-content{position:relative;max-width:90vw;max-height:90vh;flex-direction:column;animation:modalSlideIn .3s ease-out}.modal-close{position:absolute;top:-50px;right:0;background:hsla(0,0%,100%,.2);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:hsla(0,0%,100%,.3);transform:scale(1.1)}.modal-image{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}.modal-info{margin-top:15px;text-align:center}.modal-info p{color:hsla(0,0%,100%,.8);font-size:14px;font-family:monospace}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.photo-item{cursor:pointer}.photo-item:hover{transform:scale(1.05)}.info-section{padding:20px;background:hsla(0,0%,100%,.02);border-bottom:1px solid hsla(0,0%,100%,.1);margin-bottom:20px}.info-content{max-width:600px;margin:0 auto;text-align:center}.info-content h1{font-size:24px;font-weight:600;margin-bottom:12px;color:#fff}.description{font-size:16px;line-height:1.5;color:hsla(0,0%,100%,.8);margin-bottom:20px}.community-highlight{margin-bottom:24px}.highlight-box{display:flex;align-items:center;gap:16px;padding:16px 20px;background:linear-gradient(135deg,rgba(0,255,127,.1),rgba(0,191,255,.1));border-radius:12px;border:1px solid rgba(0,255,127,.2);text-align:left}.highlight-icon{font-size:24px;flex-shrink:0}.highlight-text strong{display:block;font-size:16px;font-weight:600;color:#00ff7f;margin-bottom:4px}.highlight-text p{font-size:14px;color:hsla(0,0%,100%,.8);margin:0}.features{display:flex;justify-content:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}.feature{display:flex;align-items:center;gap:8px;padding:8px 16px;background:hsla(0,0%,100%,.05);border-radius:20px;font-size:14px;color:hsla(0,0%,100%,.9)}.feature-icon{font-size:16px}.warning-info{padding:16px;background:rgba(255,193,7,.1);border-radius:12px;border:1px solid rgba(255,193,7,.3);margin-bottom:20px;text-align:center}.warning-title{font-size:14px;font-weight:600;margin-bottom:8px;color:#ffc107}.warning-text{font-size:13px;line-height:1.4;color:hsla(0,0%,100%,.85);margin:0}.contact-info{padding:16px;background:rgba(0,123,255,.1);border-radius:12px;border:1px solid rgba(0,123,255,.2)}.contact-title{font-size:14px;font-weight:500;margin-bottom:12px;color:hsla(0,0%,100%,.9)}.contact-options{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.contact-link{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(0,123,255,.2);color:#007aff;text-decoration:none;border-radius:8px;font-size:14px;font-weight:500;transition:all .3s ease;border:1px solid rgba(0,123,255,.3)}.contact-link:hover{background:rgba(0,123,255,.3);transform:translateY(-1px)}@media (max-width:768px){.info-section{padding:16px}.info-content h1{font-size:20px}.description{font-size:14px}.features{gap:12px}.feature{font-size:12px;padding:6px 12px}.contact-options{flex-direction:column;gap:8px}.contact-link{justify-content:center}.highlight-box{flex-direction:column;text-align:center;gap:12px;padding:14px 16px}.highlight-text strong{font-size:15px}.highlight-text p{font-size:13px}.warning-info{padding:14px}.warning-title{font-size:13px}.warning-text{font-size:12px}}.photo-validation-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.validation-content{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border-radius:16px;padding:24px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;border:1px solid hsla(0,0%,100%,.1);box-shadow:0 20px 40px rgba(0,0,0,.5)}.validation-header{text-align:center;margin-bottom:20px}.validation-header h3{font-size:20px;font-weight:600;margin-bottom:8px;color:#fff}.validation-header p{font-size:14px;color:hsla(0,0%,100%,.7);margin:0}.validation-preview{margin-bottom:24px;border-radius:12px;overflow:hidden;background:#000}.preview-image{width:100%;height:auto;display:block;max-height:400px;object-fit:contain}.validation-actions{display:flex;gap:12px;justify-content:center}.cancel-btn,.validate-btn{flex:1 1;padding:14px 20px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.cancel-btn{background:rgba(220,53,69,.2);color:#dc3545;border:1px solid rgba(220,53,69,.3)}.cancel-btn:hover{background:rgba(220,53,69,.3);transform:translateY(-1px)}.validate-btn{background:rgba(40,167,69,.2);color:#28a745;border:1px solid rgba(40,167,69,.3)}.validate-btn:hover{background:rgba(40,167,69,.3);transform:translateY(-1px)}@media (max-width:768px){.photo-validation-modal{padding:16px}.validation-content{padding:20px}.validation-header h3{font-size:18px}.validation-actions{flex-direction:column}.cancel-btn,.validate-btn{padding:12px 16px;font-size:15px}}@media (prefers-color-scheme:light){body,html{background:#000;color:#fff}}