*{box-sizing:border-box;margin:0;padding:0}:root{--bg-body: #111;--bg-nav: #1a1a1a;--bg-panel: #1a1a1a;--bg-input: #222;--border: #2a2a2a;--border-input: #444;--text-primary: #fff;--text-secondary: #eee;--text-muted: #888;--text-dimmed: #666;--text-sep: #444;--video-bg: #000;--error-bg: #d32f2f;color-scheme:dark}[data-theme=light]{--bg-body: #f2f2f7;--bg-nav: #fff;--bg-panel: #fff;--bg-input: #f0f0f0;--border: #e0e0e0;--border-input: #ccc;--text-primary: #1a1a1a;--text-secondary: #333;--text-muted: #888;--text-dimmed: #aaa;--text-sep: #ccc;--video-bg: #000;--error-bg: #d32f2f;color-scheme:light}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg-body);color:var(--text-secondary)}#root{width:100%;height:100%}.app{width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden}.navbar{flex-shrink:0;background:var(--bg-nav);border-bottom:1px solid var(--border)}.nav-container{max-width:1200px;margin:0 auto;padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.nav-title{font-size:1rem;font-weight:600;color:var(--text-primary);letter-spacing:.3px}.nav-actions{display:flex;gap:.625rem;align-items:center}.device-select{background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border-input);padding:6px 12px;border-radius:6px;font-size:.8125rem;cursor:pointer;outline:none;transition:border-color .15s}.device-select:focus{border-color:var(--text-muted)}.theme-toggle{width:34px;height:34px;border-radius:8px;border:1px solid var(--border-input);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .15s,border-color .15s;line-height:1;padding:0}.theme-toggle:hover{border-color:var(--text-muted)}.theme-toggle svg{display:block;pointer-events:none}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:1rem 1.5rem;min-height:0}.video-section{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:.75rem;min-height:0;flex:1}.error{background:var(--error-bg);color:#fff;padding:.75rem 1rem;border-radius:8px;font-size:.875rem;text-align:center;width:100%;max-width:1100px;margin-bottom:1rem}.video-container{position:relative;width:100%;flex:1;min-height:0;border-radius:12px;overflow:hidden;background:var(--video-bg)}video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.fullscreen-btn{position:absolute;top:.75rem;right:.75rem;z-index:10;width:36px;height:36px;border-radius:8px;border:none;background:#00000073;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1}.fullscreen-btn:hover{background:#000000b3}.recording-indicator{position:absolute;top:.75rem;left:.75rem;z-index:10;display:flex;align-items:center;gap:.5rem;background:#00000080;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 12px;border-radius:8px}.rec-dot{width:10px;height:10px;border-radius:50%;background:#e74c3c;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.rec-time{font-size:.8125rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.video-controls{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:1.25rem;z-index:10}.control-btn{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:#ffffff1f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.control-btn:hover{background:#ffffff40;border-color:#fff}.photo-btn{background:#fff3}.photo-btn:hover{background:#ffffff59}.record-btn{background:#ffffff1f}.record-btn:hover{background:#ffffff40}.record-btn.recording{border-color:#e74c3c;background:#e74c3c40;animation:pulse-border 1.5s ease-in-out infinite}.record-btn.recording:hover{background:#e74c3c66}@keyframes pulse-border{0%,to{box-shadow:0 0 #e74c3c66}50%{box-shadow:0 0 0 6px #e74c3c00}}.info-panel{flex-shrink:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:.875rem 1.25rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.info-row{display:flex;flex-direction:column;gap:2px}.info-label{font-size:.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:500}.info-value{font-size:.875rem;color:var(--text-secondary);font-weight:500}.footer{flex-shrink:0;background:var(--bg-nav);border-top:1px solid var(--border)}.footer-container{max-width:1200px;margin:0 auto;padding:.625rem 1.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;color:var(--text-dimmed)}.footer-sep{color:var(--text-sep)}.footer-link{color:var(--text-muted);text-decoration:none;transition:color .15s}.footer-link:hover{color:var(--text-primary)}.video-container:fullscreen{border-radius:0;background:#000}.video-container:fullscreen video{object-fit:cover}@media (max-width: 860px){.main-content{padding:.75rem}.nav-container,.footer-container{padding-left:.75rem;padding-right:.75rem}.info-panel{grid-template-columns:1fr 1fr}}@media (max-width: 480px){.main-content{padding:.75rem}.video-section{gap:.5rem}.info-panel{grid-template-columns:1fr;padding:.75rem 1rem;gap:.5rem}.info-row{flex-direction:row;justify-content:space-between;align-items:center;gap:0}.control-btn{width:46px;height:46px}}@media (max-height: 550px){.main-content{padding:.5rem 1rem}.video-section{gap:.5rem}.info-panel{padding:.5rem 1rem}.footer-container{padding:.375rem 1rem}}