*{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #121212;--color-text: #E1E1E1;--color-text-secondary: #A8A8A8;--color-accent: #82aaff;--color-recording: #ff453a;--color-border: rgba(255, 255, 255, .12);--font-primary: "Inter", sans-serif}body{font-family:var(--font-primary);background-color:var(--color-bg);color:var(--color-text);display:flex;justify-content:center;align-items:center;min-height:100vh;text-align:center}.app-container{padding:20px;display:flex;flex-direction:column;align-items:center;width:100%}.main-content{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px}.recording-interface{padding:30px 20px;border-radius:16px;background-color:#1e1e1e;box-shadow:0 4px 24px #0006;display:flex;flex-direction:column;align-items:center;width:100%;gap:20px}.video-container{width:100%;aspect-ratio:16 / 9;background-color:#000;border-radius:12px;overflow:hidden;margin-bottom:10px;border:1px solid var(--color-border);display:flex;justify-content:center;align-items:center}#webcamPreview{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.status-indicator{margin-bottom:0}.status-text{font-size:1em;color:var(--color-text-secondary)}.recording-controls{margin:10px 0}.record-button{position:relative;width:80px;height:80px;border-radius:50%;border:none;background-color:var(--color-accent);color:#fff;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:background-color .3s ease,transform .2s ease;padding:10px}.record-button:hover{background-color:#6c8edf;transform:scale(1.05)}.record-button:active{transform:scale(.95)}.record-button.recording{background-color:var(--color-recording)}.record-button.recording:hover{background-color:#e0342a}.record-button-content-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.record-button #micIcon{font-size:2em;margin-bottom:4px}.record-text{display:block;font-size:.8em;color:var(--color-text);font-weight:500}.record-waves{position:absolute;width:140px;height:140px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:-1}.wave{fill:none;stroke:var(--color-accent);stroke-width:2px;opacity:0;transform-origin:center}.record-button.recording .wave{stroke:var(--color-recording)}.record-button.recording .record-waves{display:block!important}.record-button.recording .wave1{animation:wave 2s infinite ease-out}@keyframes wave{0%{transform:scale(.5) translate(-50%,-50%);opacity:.7}to{transform:scale(1.5) translate(-50%,-50%);opacity:0}}.control-row{display:flex;justify-content:center;width:100%}.camera-button{display:flex;align-items:center;gap:8px;padding:10px 16px;background-color:#2a2a2a;color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:20px;cursor:pointer;font-size:.9em;transition:all .2s ease}.camera-button:hover{background-color:#333;color:var(--color-text)}.camera-button.active{background-color:#2a2a2a;color:var(--color-accent);border-color:var(--color-accent)}.camera-button.active i{color:var(--color-accent)}.image-upload-area{padding:15px;background-color:#2a2a2a;border-radius:8px;width:100%;display:flex;flex-direction:column;align-items:center;gap:15px;border:1px solid var(--color-border)}.image-upload-label{display:inline-flex;align-items:center;padding:8px 16px;background-color:#333;color:var(--color-text);border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-size:.9em;border:1px solid var(--color-border)}.image-upload-label:hover{background-color:#444}.image-upload-label i{margin-right:8px}.image-preview-container{position:relative;border:2px dashed var(--color-border);padding:4px;border-radius:4px;width:100%;display:flex;justify-content:center}#imagePreview{max-width:100%;max-height:150px;border-radius:4px;object-fit:contain}.remove-image-button{position:absolute;top:-8px;right:-8px;background-color:var(--color-recording);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:14px;font-weight:700;line-height:20px;text-align:center;cursor:pointer;box-shadow:0 2px 4px #0000004d}.app-title{font-size:1.8em;font-weight:700;color:var(--color-text);margin-bottom:20px;text-align:center}