body{margin:0;font-family:Arial,sans-serif;background:#f3f4f6;display:flex;justify-content:center;align-items:center;height:100vh}.config-container,.call-container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:20px;width:100%;text-align:center}.status{font-size:18px;font-weight:700;margin-bottom:15px;color:#333}.waiting{color:#ff9800}.connected{color:#4caf50}.video-preview{width:100%;height:260px;background:#000;border-radius:8px;margin-bottom:15px}.buttons{display:flex;justify-content:space-around;margin-top:15px}.btn{padding:12px 20px;border:none;border-radius:8px;cursor:pointer;font-size:16px;color:#fff;transition:.3s}.btn-call{background:#4caf50}.btn-call:hover{background:#43a047}.btn-end{background:#f44336}.btn-end:hover{background:#e53935}.btn-wait{background:#2196f3}.btn-wait:hover{background:#1976d2}.app>div.active{display:block}.form-container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:20px;width:100%;margin:0 auto}.form-container h3{margin-bottom:4px;text-align:center;color:#333}.form-group{margin-bottom:12px}.form-group input{width:100%;padding:10px;border-radius:6px;border:1px solid #ccc;font-size:14px}.buttons{display:flex;justify-content:space-between;margin-top:20px}.btn{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;color:#fff;transition:.3s}.btn-next{background:#4caf50}.btn-next:hover{background:#43a047}.btn-prev{background:#2196f3}.btn-prev:hover{background:#1976d2}body{font-family:Arial,sans-serif;background:#f3f4f6}.config-container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:20px;max-width:100%;margin:auto}.config-container h3{margin-bottom:4px;text-align:center}.form-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}.form-row input{flex:1;min-width:120px;padding:10px;border-radius:6px;border:1px solid #ccc;font-size:14px}.col-2 input,.col-4 input,.col-2 div{flex:1}select{width:100%;padding:10px;border-radius:6px;border:1px solid #ccc;font-size:14px;background-color:#fff;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}select:focus{border-color:#4caf50;box-shadow:0 0 0 3px #4caf5033;outline:none}select:hover{border-color:#888}video{width:240px;height:180px;object-fit:contain;background:#000}
