*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#0f172a;color:#fff}html,body{height:100%}.join-container{text-align:center;padding-top:100px}.join-container input,.join-container button{padding:12px;margin:10px;border-radius:8px;border:none;font-size:16px}.join-container input{width:250px}.join-container button{background:#22c55e;color:#fff;cursor:pointer}.meeting-wrapper{height:100dvh;display:flex;flex-direction:column}.top-bar{background:#020617;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;font-size:18px}.meeting-layout{flex:1;display:flex;gap:10px;padding:10px;min-height:0}.main-video{flex:3;background:#000;border-radius:15px;overflow:hidden;position:relative;display:flex}#video-area{width:100%;height:100%}#video-area iframe{width:100%!important;height:100%!important;border:0}.video-overlay{position:absolute;top:15px;left:15px;background:red;padding:6px 12px;border-radius:6px;font-size:12px}.sidebar{flex:1;background:#020617;border-radius:15px;padding:15px;overflow-y:auto}.controls{background:#020617;padding:15px}.controls button{padding:12px 18px;margin:5px;border:none;border-radius:8px;font-size:16px;cursor:pointer}.leave{background:red;color:#fff}@media(max-width:1024px){.meeting-layout{flex-direction:column}.main-video{height:60vh}}@media(max-width:768px){.top-bar{font-size:16px;padding:12px;flex-direction:column;gap:5px}.meeting-layout{flex-direction:column;padding:0;gap:0}.main-video{width:100%;height:60dvh;border-radius:0}.sidebar{width:100%;margin-top:10px;border-radius:15px 15px 0 0;font-size:14px}.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:15px}.controls button{width:100%;margin:0}}@media(max-width:480px){.join-container{padding-top:60px}.join-container input,.join-container button{width:85%}.main-video{height:55dvh}.video-overlay{font-size:10px;padding:4px 8px}.sidebar{font-size:13px}.controls button{font-size:14px;padding:10px}}