*{box-sizing:border-box}body{margin:0;background:#090909;color:#eee;font-family:Arial,sans-serif}button,input{font:inherit}button{border:0;border-radius:10px;padding:12px 16px;cursor:pointer;background:#444;color:#fff}input{width:100%;margin:7px 0;padding:13px;border-radius:8px;border:1px solid #444;background:#151515;color:#fff}.screen{min-height:100vh;display:grid;place-items:center}.card{background:#151515;border:1px solid #333;border-radius:16px;padding:24px;width:min(440px,92vw);box-shadow:0 12px 40px #000}.card h1{text-align:center;margin:0;font-size:34px}.card h2{text-align:center;font-weight:normal}.card>button{width:100%;margin-top:10px}.error{color:#ff7777;min-height:24px;margin-top:10px}.hidden{display:none!important}header{min-height:64px;padding:12px 18px;border-bottom:1px solid #333;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}header span{color:#aaa}.user{display:flex;align-items:center;justify-content:space-between;border:1px solid #333;border-radius:12px;padding:14px;margin:10px 0;gap:10px}.online{color:#63e681}.offline{color:#888}.overlay{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:10}.row{display:flex;gap:10px}.row button{flex:1}.danger{background:#8b1717}.call{position:fixed;inset:0;background:#000;z-index:20}.call video{background:#000;object-fit:cover}.call #remoteVideo{position:absolute;inset:0;width:100%;height:100%}.call #localVideo{position:absolute;right:14px;top:14px;width:130px;height:180px;border-radius:12px;border:2px solid #fff}.controls{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:12px}.controls button{min-width:90px}.call #callStatus{position:absolute;top:15px;left:15px;background:#0009;padding:10px;border-radius:8px}

html,body{min-height:100%;background:#090909}
main{padding:20px;max-width:900px;margin:0 auto}
@media (max-width:600px){header{padding:10px 12px}.user{align-items:flex-start;flex-direction:column}.user>div:last-child{width:100%;display:flex;gap:8px}.user button{flex:1}.call #localVideo{width:110px;height:155px;top:12px;right:12px}.controls{bottom:max(18px,env(safe-area-inset-bottom));padding:0 12px}.controls button{min-width:80px}}