:root{--bg-color:#0f0f13;--panel-bg:#141419bf;--text-color:#f0f0f0;--accent-color:#f05;--accent-hover:#f37;--border-color:#ffffff1a;--font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}body{font-family:var(--font-family);color:var(--text-color);-webkit-font-smoothing:antialiased;background:radial-gradient(circle,#1a1a2e 0%,#0f0f13 100%);margin:0;overflow:hidden}#app{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}#ui-container{z-index:10;pointer-events:none;box-sizing:border-box;flex-direction:column;justify-content:center;width:320px;height:100%;padding:20px;display:flex;position:absolute;top:0;right:0}.panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);pointer-events:auto;border:1px solid var(--border-color);border-radius:20px;padding:25px;transition:transform .3s;box-shadow:0 8px 32px #0006}.panel:hover{border-color:#fff3}h3{letter-spacing:.5px;border-bottom:1px solid var(--border-color);color:#fff;text-transform:uppercase;opacity:.9;margin-top:0;margin-bottom:25px;padding-bottom:15px;font-size:.9rem;font-weight:600}.section{margin-bottom:25px}label{color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:.85rem;font-weight:500;display:block}.button-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}button{color:#ddd;cursor:pointer;font-size:.9rem;font-weight:500;font-family:var(--font-family);background:#ffffff0d;border:1px solid #0000;border-radius:10px;padding:12px;transition:all .3s cubic-bezier(.4,0,.2,1)}button:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 12px #0003}button.active{background:var(--accent-color);color:#fff;border-color:#fff3;box-shadow:0 0 15px #f056}input[type=color]{cursor:pointer;box-sizing:border-box;background:#ffffff0d;border:none;border-radius:10px;width:100%;height:45px;padding:5px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}input[type=range]{-webkit-appearance:none;background:#ffffff1a;border-radius:3px;outline:none;width:100%;height:6px;margin:10px 0}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent-color);cursor:pointer;border-radius:50%;width:18px;height:18px;transition:background .15s ease-in-out;box-shadow:0 0 10px #00000080}input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}.video-preview{border:1px solid var(--border-color);background:#000;border-radius:12px;width:100%;height:140px;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #00000080}.video-preview canvas{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.status{color:#888;text-align:center;justify-content:center;align-items:center;gap:6px;margin-top:10px;font-size:.8rem;font-weight:500;display:flex}.status:before{content:"";background:#555;border-radius:50%;width:8px;height:8px;transition:background .3s;display:block}.status.active:before{background:#0f8;box-shadow:0 0 8px #0f8}#fullscreen-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;border:1px solid var(--border-color);color:#fff;background:#ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;padding:0;font-size:1.4rem;display:flex;position:absolute;bottom:30px;right:30px}#fullscreen-btn:hover{background:var(--accent-color);transform:scale(1.1)}#loading-overlay{z-index:100;background:#0f0f13;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s;display:flex;position:fixed;top:0;left:0}.loader{border:5px solid #fff;border-bottom-color:var(--accent-color);box-sizing:border-box;border-radius:50%;width:48px;height:48px;margin-bottom:20px;animation:1s linear infinite rotation;display:inline-block}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}