html,body{margin:0;width:100%;height:100%}*{box-sizing:border-box}.app-container{position:relative;height:100vh;background:#1a1a1a;color:#f0f0f0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.flash-area{position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0a0a}.toggle-sidebar-btn{position:absolute;top:24px;right:24px;width:48px;height:48px;background:#2a2a2a;border:2px solid #3a3a3a;border-radius:8px;color:#f0f0f0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:100}.toggle-sidebar-btn:hover{background:#3a3a3a;border-color:#4a9eff;transform:scale(1.05)}.control-panel{position:fixed;top:0;right:0;width:100%;max-width:500px;min-width:400px;background:#2a2a2a;padding:24px;overflow-y:auto;height:100vh;display:flex;flex-direction:column;border-left:2px solid #3a3a3a;transition:transform .3s ease-in-out;z-index:50}.control-panel.hidden{transform:translate(100%)}.control-panel h1{margin:0 0 24px;font-size:24px;font-weight:600;color:#fff}.camera-preview-container{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:8px;overflow:hidden;margin-bottom:24px;display:flex;align-items:center;justify-content:center}#video{width:100%;height:100%;object-fit:cover;display:none}#video.active{display:block}.controls{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:14px;font-weight:500;color:#ccc;display:flex;justify-content:space-between;align-items:center}.control-group select,.control-group input[type=range]{width:100%;padding:10px;border:1px solid #444;border-radius:6px;background:#1a1a1a;color:#f0f0f0;font-size:14px}.control-group select{cursor:pointer}.control-group input[type=range]{padding:0;height:6px;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#4a9eff;cursor:pointer;border:2px solid #ffffff}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4a9eff;cursor:pointer;border:2px solid #ffffff}.btn-primary,.btn-secondary{padding:12px 24px;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:#4a9eff;color:#fff}.btn-primary:hover{background:#3a8eef;transform:translateY(-1px)}.btn-primary.active{background:#ef4444}.btn-primary.active:hover{background:#dc2626}.btn-primary:disabled{background:#333;color:#666;cursor:not-allowed;opacity:.5}.btn-primary:disabled:hover{background:#333;transform:none}.btn-secondary{background:#444;color:#fff;padding:8px 16px;font-size:14px}.btn-secondary:hover{background:#555}.gallery-section{flex:1;display:flex;flex-direction:column;min-height:0}.gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.gallery-header h2{margin:0;font-size:18px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}.count{background:#4a9eff;color:#fff;padding:2px 8px;border-radius:12px;font-size:14px}.gallery{display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:4px;flex:1}.gallery-item{position:relative;width:100%;height:150px;min-height:150px;flex-shrink:0;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s;background:#1a1a1a;display:flex;align-items:center;justify-content:center}.gallery-item:hover{border-color:#4a9eff}.gallery-item img{width:100%;height:100%;object-fit:cover}.gallery-item .timestamp{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:4px;font-size:10px;text-align:center}.flash{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;transition:none}.flash.active{opacity:1!important}.captured-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;border-radius:8px}.captured-image.show{opacity:1}.status-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#888;font-size:16px;text-align:center;pointer-events:none}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:#000000e6}.modal.show{display:flex;align-items:center;justify-content:center}.modal-content{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center;gap:16px}#modalImage{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px}.close-btn{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:40px;font-weight:300;cursor:pointer;line-height:1}.close-btn:hover{color:#4a9eff}.modal-timestamp{color:#ccc;font-size:16px;margin:0}@media(max-width:1024px){.flash-area,.toggle-sidebar-btn{display:none}.control-panel{position:relative;max-width:100%;min-width:100%;border-left:none;border-top:2px solid #3a3a3a}.control-panel.hidden{transform:none}}@media(max-width:640px){.control-panel{padding:16px}.control-panel h1{font-size:20px;margin-bottom:16px}}