.app{display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:100vh;font-family:Arial,sans-serif;background-color:#f4f4f9;margin:0;padding:0}.title{font-size:32px;margin-top:20px;color:#333;text-align:center;font-weight:700}.video-wrapper{position:relative;display:flex;justify-content:center;align-items:center;flex-grow:1;width:100%}.video-element{border:2px solid #333;border-radius:8px;max-width:80%;height:auto}.recording-indicator{position:absolute;top:10px;left:10px;display:flex;align-items:center;font-size:18px;color:#e74c3c;font-weight:700;background-color:#0009;padding:8px 12px;border-radius:5px}.recording-indicator .dot{height:15px;width:15px;background-color:#e74c3c;border-radius:50%;display:inline-block;margin-right:8px;animation:blink 1s infinite}@keyframes blink{50%{opacity:0}}.controls{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:20px}.preview-btn,.record-btn,.stop-btn{padding:10px 20px;font-size:18px;cursor:pointer;border:none;border-radius:5px;margin:10px 0;transition:background-color .3s}.preview-btn{background-color:#3498db;color:#fff}.preview-btn:hover{background-color:#2a76a9}.record-btn{background-color:#e74c3c;color:#fff}.record-btn:hover{background-color:#c0392b}.stop-btn{background-color:#2ecc71;color:#fff}.stop-btn:hover{background-color:#27ae60}.download-btn{display:inline-block;margin-top:10px;padding:10px 20px;background-color:#3498db;color:#fff;text-decoration:none;border-radius:5px;font-size:16px}.download-btn:hover{background-color:#2980b9}.device-selection{margin-bottom:20px;display:flex;justify-content:center}.select-container{margin-right:20px}label{font-size:16px;font-weight:700;margin-right:10px}select{padding:5px 10px;font-size:14px}.permission-request{text-align:center;margin:20px}.grant-permission-btn{padding:10px 20px;font-size:16px;background-color:#3498db;color:#fff;border:none;border-radius:5px;cursor:pointer}.grant-permission-btn:hover{background-color:#2980b9}