body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);overflow-x:hidden}.container{display:flex;flex-direction:column;height:100vh;view-transition-name:app-photo}::view-transition-group(app-photo){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1)}.camera-view{flex:1;position:relative;overflow:hidden;background:#000}video,canvas{width:100%;height:100%;object-fit:cover}video.filter-none{filter:none}video.filter-grayscale{filter:grayscale(100%)}video.filter-sepia{filter:sepia(100%)}video.filter-saturate{filter:saturate(3)}video.filter-invert{filter:invert(100%)}.controls{padding:20px;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.filters{display:flex;gap:10px;margin-bottom:15px;overflow-x:auto;padding-bottom:5px}.filter-btn{background:#ffffff1a;border:2px solid rgba(255,255,255,.3);color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;white-space:nowrap;cursor:pointer;transition:all .2s}.filter-btn.active{background:#9b59b6;border-color:#9b59b6}.filter-btn:active{transform:scale(.95)}.shutter-btn{width:70px;height:70px;border-radius:50%;background:#fff;border:5px solid #9b59b6;display:flex;align-items:center;justify-content:center;margin:0 auto;cursor:pointer;transition:transform .1s}.shutter-btn:active{transform:scale(.9)}.gallery{background:#000000e6;padding:15px;max-height:200px;overflow-y:auto}.gallery h3{color:#fff;margin:0 0 10px;font-size:16px}.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.photo-item{position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;cursor:pointer}.photo-item img{width:100%;height:100%;object-fit:cover}.photo-item .delete-btn{position:absolute;top:5px;right:5px;background:#e74c3ce6;border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:1000}.modal{background:#fff;padding:30px;border-radius:20px;text-align:center;max-width:80%}.modal h1{margin-top:0;color:#9b59b6}.modal button{background:#9b59b6;color:#fff;border:none;padding:15px 30px;font-size:18px;border-radius:30px;cursor:pointer;font-weight:700;margin-top:20px}.hidden{display:none}@media(min-width:768px){.photos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}