*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Arial,Helvetica,sans-serif;background:#f4f4f4;color:#222}.app{display:flex;flex-direction:column;align-items:center;height:100%;padding:16px}.join-screen{margin:auto;width:320px;padding:24px;background:#fff;border:1px solid #ccc;border-radius:6px;text-align:center}.join-screen h1{font-size:20px;margin-bottom:4px}.join-screen p{color:#666;font-size:13px;margin-bottom:16px}.join-screen input{width:100%;padding:8px;margin-bottom:10px;border:1px solid #bbb;border-radius:4px;font-size:14px}.join-screen button{width:100%;padding:9px;background:#4f8fef;color:#fff;border:none;border-radius:4px;font-size:14px;cursor:pointer}.join-screen button:disabled{background:#a9c4ee;cursor:not-allowed}.error-text{color:#c0392b;font-size:13px;margin-top:8px}.room-header{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px;color:#444}.room-canvas-wrap{position:relative;border:1px solid #ccc;border-radius:4px;overflow:hidden;background:#eef1f4}canvas{display:block;cursor:default}.hint{margin-top:10px;font-size:12px;color:#777}.call-panel{position:absolute;bottom:16px;right:16px;display:flex;gap:8px;background:#0000008c;padding:8px;border-radius:6px}.call-panel video{width:160px;height:120px;background:#000;border-radius:4px;object-fit:cover}.call-panel .video-label{position:absolute;bottom:2px;left:6px;font-size:11px;color:#fff;text-shadow:0 0 3px #000}.video-box{position:relative}