:root{--primary-color: #5865f2;--secondary-color: #4752c4;--background-color: #2c2f33;--surface-color: #36393f;--text-color: #ffffff;--text-muted: #b9bbbe;--border-color: #4f545c;--success-color: #43b581;--error-color: #f04747}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;background-color:var(--background-color);color:var(--text-color);height:100vh;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.header{background-color:var(--surface-color);padding:1rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.header h1{font-size:1.5rem;font-weight:600}.controls{display:flex;gap:.5rem;align-items:center}.controls input{padding:.5rem;border:none;border-radius:4px;background-color:var(--background-color);color:var(--text-color);min-width:300px}.controls input:focus{outline:2px solid var(--primary-color)}button{padding:.5rem 1rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}button:hover{background-color:var(--secondary-color)}button:disabled{background-color:var(--border-color);cursor:not-allowed}.main{display:flex;flex:1;overflow:hidden}.video-container{flex:1;background-color:#000;display:flex;align-items:center;justify-content:center;position:relative}#videoPlayer{width:100%;height:100%;display:flex;align-items:center;justify-content:center}#videoPlayer iframe{width:100%;height:100%;border:none}.placeholder{text-align:center;color:var(--text-muted)}.sidebar{width:300px;background-color:var(--surface-color);border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.participants,.sync-controls,.chat{padding:1rem;border-bottom:1px solid var(--border-color)}.participants h3,.sync-controls h3,.chat h3{margin-bottom:.5rem;font-size:1rem;font-weight:600}.participants-list{display:flex;flex-direction:column;gap:.25rem}.participant{display:flex;align-items:center;gap:.5rem;padding:.25rem;border-radius:4px}.participant-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--primary-color)}.sync-controls{display:flex;flex-direction:column;gap:.5rem}.sync-time{font-size:.875rem;color:var(--text-muted)}.chat{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-messages{flex:1;overflow-y:auto;padding:.5rem 0;display:flex;flex-direction:column;gap:.5rem}.chat-message{padding:.25rem;border-radius:4px;font-size:.875rem}.chat-message .author{font-weight:600;color:var(--primary-color)}.chat-input{display:flex;gap:.5rem;margin-top:.5rem}.chat-input input{flex:1;padding:.5rem;border:none;border-radius:4px;background-color:var(--background-color);color:var(--text-color)}.chat-input input:focus{outline:2px solid var(--primary-color)}.chat-input button{padding:.5rem;background-color:var(--success-color)}.chat-input button:hover{background-color:#3ca374}@media (max-width: 768px){.main{flex-direction:column}.sidebar{width:100%;height:40%;border-left:none;border-top:1px solid var(--border-color)}.video-container{height:60%}.controls{flex-direction:column;gap:.5rem}.controls input{min-width:200px}}