.app{display:flex;flex-direction:column;height:100vh;background:#1e1f22;color:#fff}.app-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#2b2d31;border-bottom:1px solid #3f4147}.app-header h1{font-size:18px;font-weight:600;margin:0}.connecting{font-size:12px;color:#f0b232;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.host-badge{background:#5865f2;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}.app-main{flex:1;overflow:hidden}.watch-container{display:flex;height:100%}.video-section{flex:1;display:flex;flex-direction:column;min-width:0}.participants-section{width:240px;background:#2b2d31;border-left:1px solid #3f4147;overflow-y:auto}.video-player{flex:1;display:flex;align-items:center;justify-content:center;background:#000;position:relative}.video-player video{max-width:100%;max-height:100%}.video-player .no-media{color:#b5bac1;text-align:center}.controls{padding:12px 16px;background:#2b2d31;border-top:1px solid #3f4147}.controls-main{display:flex;align-items:center;gap:12px}.control-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:4px;transition:background .15s}.control-btn:hover{background:#3f4147}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.primary{background:#5865f2}.control-btn.primary:hover{background:#4752c4}.progress-bar{flex:1;height:4px;background:#4f545c;border-radius:2px;cursor:pointer;position:relative}.progress-bar-fill{height:100%;background:#5865f2;border-radius:2px;transition:width .1s}.time-display{font-size:12px;color:#b5bac1;min-width:80px;text-align:right}.participants{padding:12px}.participants h3{font-size:12px;font-weight:600;color:#b5bac1;text-transform:uppercase;margin-bottom:12px}.participant{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;margin-bottom:2px}.participant:hover{background:#3f4147}.participant.is-host{background:#5865f21a}.participant-avatar{width:32px;height:32px;border-radius:50%;background:#5865f2}.participant-info{flex:1;min-width:0}.participant-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.participant-status{font-size:12px;color:#b5bac1}.media-browser{height:100%;display:flex;flex-direction:column}.browser-header{padding:16px;background:#2b2d31;border-bottom:1px solid #3f4147}.search-input{width:100%;padding:10px 12px;background:#1e1f22;border:1px solid #3f4147;border-radius:4px;color:#fff;font-size:14px}.search-input:focus{outline:none;border-color:#5865f2}.browser-tabs{display:flex;gap:4px;padding:8px 16px;background:#2b2d31;border-bottom:1px solid #3f4147}.browser-tab{padding:8px 16px;background:none;border:none;color:#b5bac1;cursor:pointer;border-radius:4px;font-size:14px;transition:all .15s}.browser-tab:hover{background:#3f4147;color:#fff}.browser-tab.active{background:#5865f2;color:#fff}.browser-content{flex:1;overflow-y:auto;padding:16px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.media-card{cursor:pointer;border-radius:8px;overflow:hidden;background:#2b2d31;transition:transform .15s,box-shadow .15s}.media-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0006}.media-card-poster{aspect-ratio:2/3;background:#3f4147;background-size:cover;background-position:center}.media-card-info{padding:8px}.media-card-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-card-meta{font-size:12px;color:#b5bac1;margin-top:4px}.loading{display:flex;justify-content:center;align-items:center;height:200px;color:#b5bac1}.error{color:#ed4245;padding:20px;text-align:center}@media (max-width: 768px){.watch-container{flex-direction:column}.participants-section{width:100%;height:auto;max-height:150px;border-left:none;border-top:1px solid #3f4147}.media-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}