*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f0f0f;color:#f0f0f0;height:100vh}.join-page{display:flex;align-items:center;justify-content:center;height:100vh}.code-input-form{display:flex;flex-direction:column;gap:16px;width:360px;padding:40px;background:#1a1a1a;border-radius:12px;border:1px solid #2a2a2a}.code-input-form h1{font-size:1.5rem}.code-input-form p{color:#888;font-size:.9rem}.code-input-form input{padding:14px;font-size:2rem;letter-spacing:.5rem;text-align:center;background:#111;border:1px solid #333;border-radius:8px;color:#fff;outline:none}.code-input-form input:focus{border-color:#4f8ef7}.code-input-form button{padding:14px;background:#4f8ef7;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:background .2s}.code-input-form button:disabled{background:#333;cursor:not-allowed}.code-input-form button:hover:not(:disabled){background:#3a7de0}.error{color:#f87171;font-size:.85rem}.viewer-page{display:flex;flex-direction:column;height:100vh;background:#000}.viewer-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:#111;border-bottom:1px solid #222}.viewer-header button{padding:6px 16px;background:#333;color:#fff;border:none;border-radius:6px;cursor:pointer}.screen-video{flex:1;width:100%;object-fit:contain;background:#000}.screen-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#555}.status-badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}.status-connecting{background:#333;color:#aaa}.status-waiting-for-offer{background:#1a3a5c;color:#7ab3f7}.status-streaming{background:#1a3a1a;color:#4ade80}.status-disconnected{background:#3a1a1a;color:#f87171}